Selama ini kita menggunakan font standar seperti Arial, Times New Roman, atau sans-serif. Tapi website modern biasanya menggunakan font kustom agar tampil lebih menarik dan unik. Google Fonts adalah layanan gratis dari Google yang menyediakan ribuan pilihan font yang bisa langsung digunakan di website kita.
Apa Itu Google Fonts?
Google Fonts adalah perpustakaan font gratis (open source) yang bisa diintegrasikan ke website hanya dengan menambahkan satu baris kode. Tidak perlu download atau install font di komputer pengguna.
Kelebihan Google Fonts:
- Gratis (tanpa biaya lisensi)
- Mudah digunakan (cukup copy-paste kode)
- Ribuan pilihan font dari berbagai gaya
- Optimasi loading otomatis
- Kompatibel dengan semua browser modern
Cara Menggunakan Google Fonts
Langkah 1: Buka fonts.google.com
Langkah 2: Cari font yang diinginkan (misal: Poppins, Roboto, Open Sans, Montserrat)
Langkah 3: Klik font, lalu klik "Get font" atau "Get embed code"
Langkah 4: Pilih style (regular, bold, italic) dan weight (400, 500, 600, 700)
Langkah 5: Copy kode <link> atau @import ke dalam HTML/CSS
Metode 1: Menggunakan Tag Link (di dalam <head>)
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
Metode 2: Menggunakan @import (di dalam file CSS)
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
Metode 3: Menggunakan CSS (setelah font di-import)
body {
font-family: 'Poppins', sans-serif;
}
Tips: Gunakan parameter
display=swap agar teks tetap tampil dengan font fallback saat font Google sedang dimuat. Ini meningkatkan pengalaman pengguna.
Contoh Penggunaan Google Fonts
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts - Contoh</title>
<!-- Import Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
padding: 20px;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
h1 {
font-weight: 700;
color: #3b82f6;
}
h2 {
font-weight: 600;
color: #1e293b;
}
p {
font-weight: 400;
}
code {
font-family: 'Roboto Mono', monospace;
background: #f0f4f8;
padding: 2px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Menggunakan Google Fonts</h1>
<p>Ini adalah contoh penggunaan font <strong>Poppins</strong> untuk teks biasa dan <strong>Roboto Mono</strong> untuk kode.</p>
<h2>Kelebihan Google Fonts</h2>
<p>Google Fonts menyediakan ribuan font gratis yang bisa langsung digunakan di website tanpa perlu download.</p>
<code>font-family: 'Poppins', sans-serif;</code>
</body>
</html>
Menggunakan Google Fonts
Ini adalah contoh penggunaan font Poppins untuk teks biasa dan Roboto Mono untuk kode.
font-family: 'Poppins', sans-serif;
Rekomendasi Font Google Populer
| Nama Font | Kesan | Cocok Untuk |
|---|
Poppins
The quick brown fox jumps over the lazy dog
Bold: The quick brown fox
Roboto
The quick brown fox jumps over the lazy dog
Medium: The quick brown fox
Montserrat
The quick brown fox jumps over the lazy dog
Bold: The quick brown fox
Memilih Weight (Ketebalan) Font
Google Fonts memungkinkan kita memilih weight (ketebalan) font yang diinginkan. Ini penting untuk performa website karena hanya weight yang dipilih yang akan di-download.
| Weight Value | Nama | Kapan Pakai |
|---|---|---|
100 |
Thin | Desain minimalis, judul besar |
300 |
Light | Teks yang ingin terlihat ringan |
400 |
Regular (default) | Teks body, paragraf |
500 |
Medium | Subheading, label form |
600 |
Semi Bold | Heading kecil, tombol |
700 |
Bold | Heading utama, penekanan kuat |
900 |
Black | Judul hero section, efek dramatis |
Contoh Memilih Multiple Weight:
<!-- Hanya weight 400, 600, dan 700 --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> <!-- Range weight dari 400 sampai 700 --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400..700&display=swap" rel="stylesheet">
Tips Optimalisasi:
- Jangan mengambil semua weight (400, 500, 600, 700, 800) jika tidak digunakan
- Cukup ambil weight yang benar-benar dipakai (misal: 400 untuk body, 700 untuk heading)
- Semakin banyak weight, semakin besar file yang di-download
- Gunakan parameter
&display=swapuntuk menghindari FOIT (Flash of Invisible Text)
Menggabungkan Beberapa Font
Kita bisa menggunakan font berbeda untuk heading dan body text.
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
}
</style>
Heading dengan Montserrat
Body text menggunakan Open Sans. Kombinasi font yang harmonis membuat website terlihat profesional.
Bold text dengan Open Sans weight 600
Contoh Proyek: Website dengan Google Fonts
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website dengan Google Fonts</title>
<!-- Import Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #1e293b;
background: #f8fafc;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
font-weight: 700;
}
.hero p {
font-size: 18px;
max-width: 600px;
margin: 0 auto;
font-weight: 400;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
.card {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.card h2 {
margin-bottom: 15px;
font-weight: 700;
}
.card p {
font-weight: 400;
color: #475569;
}
.info {
background: #eef2ff;
padding: 20px;
border-radius: 12px;
margin-top: 30px;
}
.info code {
font-family: monospace;
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<section class="hero">
<h1>Google Fonts untuk Website Modern</h1>
<p>Tingkatkan desain website dengan ribuan font gratis dari Google Fonts</p>
</section>
<div class="container">
<div class="card">
<h2>Mengapa Google Fonts?</h2>
<p>Google Fonts menyediakan akses gratis ke ribuan font berkualitas tinggi. Tanpa perlu download atau instalasi, kamu bisa langsung menggunakan font profesional di website.</p>
</div>
<div class="card">
<h2>Font yang Digunakan di Halaman Ini</h2>
<p><strong>Playfair Display</strong> untuk heading (serif, elegan) dan <strong>Inter</strong> untuk body text (sans-serif, modern, mudah dibaca).</p>
</div>
<div class="info">
<h3>Kode yang Digunakan:</h3>
<pre style="background: #1e1e2e; color: #fff; padding: 10px; border-radius: 8px; overflow-x: auto; margin-top: 10px;">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
</pre>
</div>
</div>
</body>
</html>
Hasil visual website dengan Google Fonts:
Parameter URL Google Fonts yang Perlu Diketahui
| Parameter | Fungsi | Contoh |
|---|---|---|
family |
Nama font yang diinginkan | family=Poppins |
wght atau weight |
Ketebalan font | wght@400;600;700 |
ital atau italic |
Versi miring | ital,wght@1,400 |
display |
Strategi loading font | display=swap (disarankan) |
subset |
Karakter spesifik (latin, latin-ext, dll) | subset=latin |
Kesalahan Umum Pemula
- Lupa menambahkan link Google Fonts di <head> → Font tidak akan berubah, tetap menggunakan font default.
- Salah menulis nama font di CSS → Nama font harus sama persis dengan yang di Google Fonts, termasuk spasi dan huruf besar/kecil.
- Mengambil terlalu banyak weight → Memperlambat loading website. Ambil hanya weight yang benar-benar digunakan.
- Lupa menambahkan font fallback → Selalu tambahkan font cadangan seperti
sans-serifatauserif. - Tidak menggunakan display=swap → Bisa menyebabkan FOIT (teks tidak terlihat saat font sedang loading).
Debugging Tips:
- Buka Developer Tools (F12) → tab Network → cek apakah file Google Fonts berhasil dimuat (status 200)
- Tab Styles → inspect elemen teks → lihat apakah font-family yang diinginkan tercoret atau tidak
- Jika font tidak muncul, cek apakah nama font di CSS sama persis dengan di link (termasuk tanda kutip)
Latihan Singkat
- Buka fonts.google.com dan cari font "Inter"
- Pilih weight 400, 500, 600, 700
- Copy kode link dan tempel di <head> file HTML
- Terapkan font Inter ke seluruh body
- Cari font "Playfair Display" untuk heading
- Tambahkan ke link yang sama dan terapkan ke h1, h2, h3
- Simpan dan buka di browser, lihat perubahan font
Intisari Hari Ini
- Google Fonts adalah layanan font gratis dari Google
- Gunakan
<link>di<head>atau@importdi CSS untuk mengimpor font - Terapkan font dengan
font-family: 'Nama Font', fallback; - Pilih hanya weight yang dibutuhkan untuk performa optimal
- Gunakan parameter
display=swapuntuk pengalaman loading yang lebih baik - Kombinasikan 2-3 font untuk hasil terbaik (satu untuk heading, satu untuk body)
Tantangan: Buat sebuah halaman landing page sederhana dengan kombinasi font dari Google Fonts! Persyaratan:
Selamat mencoba!
- Gunakan 2 font berbeda (satu untuk heading, satu untuk body text)
- Heading menggunakan font serif (Playfair Display, Merriweather, atau Lora)
- Body text menggunakan font sans-serif (Inter, Poppins, atau Open Sans)
- Tambahkan hero section dengan judul besar dan deskripsi
- Buat 3 card fitur dengan judul dan deskripsi
- Tambahkan footer dengan copyright
- Di bagian bawah, tuliskan kode Google Fonts yang digunakan beserta penjelasan weight yang dipilih
Selamat mencoba!
Artikel Sebelumnya: HTML Dasar #37 - Proyek Akhir: Membuat Layout Website Responsif
Artikel Selanjutnya: HTML Dasar #39 - Menyisipkan YouTube Video dengan iframe