CSS Dasar #14 - Menggunakan Google Fonts di CSS (Lanjutan)

byFerdian Rahabista -
0

Setelah kita mempelajari properti typography dasar, sekarang saatnya belajar tentang Google Fonts - perpustakaan font gratis dari Google yang menyediakan ribuan pilihan font modern. Dengan Google Fonts, website Anda tidak lagi terbatas pada font standar seperti Arial atau Times New Roman.

Apa Itu Google Fonts?

Google Fonts adalah layanan gratis dari Google yang menyediakan ribuan font open source yang bisa langsung digunakan di website. Cukup tambahkan satu baris kode, dan font tersebut akan tersedia untuk semua pengguna tanpa perlu mengunduh atau menginstal.

Kelebihan Google Fonts:
  • Gratis (tanpa biaya lisensi)
  • Mudah digunakan (cukup copy-paste kode)
  • Ribuan pilihan font dari berbagai gaya
  • Optimasi loading otomatis (CDN)
  • Kompatibel dengan semua browser modern

1. Cara Dasar 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;
}

2. Memilih Font Weight (Ketebalan)

Google Fonts memungkinkan kita memilih weight (ketebalan) font yang diinginkan. Ini penting untuk performa website karena hanya weight yang dipilih yang akan di-download.

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">

Tabel Weight Google Fonts:

Weight Value Nama Kapan Pakai
100 Thin (tipis) Desain minimalis, judul besar, efek elegan
300 Light (ringan) Teks yang ingin terlihat ringan, hero section
400 Regular (normal) Body text, paragraf, konten utama
500 Medium (sedang) Subheading, label form, tombol
600 Semi Bold Heading kecil, penekanan kuat
700 Bold (tebal) Heading utama, judul artikel
800 Extra Bold Heading yang ingin menonjol
900 Black (hitam) Judul hero section, efek dramatis
Tips Optimalisasi Weight:
  • Jangan mengambil semua weight (400, 500, 600, 700, 800) jika tidak digunakan
  • Cukup ambil weight yang benar-benar dipakai (misal: 400 untuk body, 600 untuk subheading, 700 untuk heading)
  • Semakin banyak weight, semakin besar file yang di-download

3. Menggunakan Multiple Font (Kombinasi Font)

Kita bisa menggunakan font berbeda untuk heading dan body text. Kombinasi yang harmonis membuat website terlihat profesional.

Contoh Kombinasi Font:

<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

Rekomendasi Kombinasi Font Populer:

Untuk Heading Untuk Body Kesan
Montserrat Open Sans Modern, bersih, profesional
Playfair Display Poppins Elegan, kontras, mewah
Oswald Roboto Bold, tegas, modern
Lora Merriweather Klasik, nyaman dibaca

4. Parameter Display (display=swap)

Parameter display=swap mengatur bagaimana font ditampilkan saat loading. Ini sangat penting untuk pengalaman pengguna.

Nilai Parameter Display:

Nilai Penjelasan Kapan Pakai?
swap Teks langsung tampil dengan font fallback, lalu ditukar saat font siap Paling disarankan (default modern)
block Teks tidak terlihat sampai font siap (maks 3 detik) Jika ingin teks persis dengan font yang dipilih
fallback Mirip block tapi periode tidak terlihat lebih pendek Kompromi antara block dan swap
optional Font digunakan hanya jika sudah tersedia (untuk koneksi lambat) Untuk font yang tidak kritis
Rekomendasi: Selalu gunakan display=swap untuk menghindari FOIT (Flash of Invisible Text) - teks yang tidak terlihat saat font sedang loading.

5. Font dengan Italic (Miring)

Untuk menggunakan versi italic/miring dari font, kita perlu menambahkannya di parameter weight.

Contoh:

<!-- Regular dan italic untuk weight 400 -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">

<style>
    .normal { font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal; }
    .italic { font-family: 'Poppins', sans-serif; font-weight: 400; font-style: italic; }
    .bold-italic { font-family: 'Poppins', sans-serif; font-weight: 600; font-style: italic; }
</style>

Poppins Regular (400) - normal

Poppins Regular (400) - italic (jika tersedia)

Poppins Semi Bold (600) - normal

6. Optimasi Google Fonts untuk Performa

Berikut tips untuk mengoptimalkan loading Google Fonts:

  • Pilih weight secukupnya → Jangan ambil semua weight, cukup yang digunakan
  • Gunakan display=swap → Menghindari FOIT (Flash of Invisible Text)
  • Preconnect untuk DNS → Mempercepat koneksi ke server Google Fonts
  • Kombinasikan font dalam satu request → Jangan pisah-pisah

Contoh Optimasi dengan Preconnect:

<!-- Preconnect ke Google Fonts servers -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Baru kemudian load font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

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>Google Fonts - Website Modern</title>
    
    <!-- Preconnect untuk optimasi -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 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;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* Header */
        .header {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 48px;
            margin-bottom: 15px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
        
        .header p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
            font-weight: 400;
        }
        
        /* Cards */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }
        
        .card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card h3 {
            font-size: 22px;
            margin-bottom: 12px;
            font-weight: 600;
        }
        
        .card p {
            font-size: 14px;
            color: #64748b;
            line-height: 1.5;
        }
        
        /* Article */
        .article {
            background: white;
            border-radius: 20px;
            padding: 35px;
            margin: 40px 0;
        }
        
        .article h2 {
            font-size: 32px;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .article h3 {
            font-size: 24px;
            margin: 25px 0 15px 0;
            font-weight: 600;
        }
        
        .article p {
            margin-bottom: 15px;
            color: #334155;
        }
        
        .article .meta {
            font-size: 14px;
            color: #64748b;
            margin-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 15px;
        }
        
        /* Info Box */
        .info-box {
            background: #eef2ff;
            padding: 25px;
            border-radius: 16px;
            margin: 40px 0;
        }
        
        .info-box h3 {
            margin-bottom: 15px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        .info-box pre {
            background: #1e1e2e;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 15px 0;
            font-size: 13px;
        }
        
        /* Font Demo */
        .font-demo {
            background: white;
            border-radius: 16px;
            padding: 25px;
            margin: 40px 0;
        }
        
        .font-demo h3 {
            margin-bottom: 20px;
        }
        
        .font-sample {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 15px;
        }
        
        .sample {
            flex: 1;
            text-align: center;
            padding: 15px;
            background: #f8fafc;
            border-radius: 12px;
        }
        
        .sample-regular { font-family: 'Inter', sans-serif; font-weight: 400; }
        .sample-medium { font-family: 'Inter', sans-serif; font-weight: 500; }
        .sample-semibold { font-family: 'Inter', sans-serif; font-weight: 600; }
        .sample-bold { font-family: 'Inter', sans-serif; font-weight: 700; }
        
        footer {
            background: #1e293b;
            color: #94a3b8;
            text-align: center;
            padding: 30px;
            margin-top: 40px;
            border-radius: 16px;
        }
        
        @media (max-width: 768px) {
            .header h1 { font-size: 32px; }
            .article h2 { font-size: 28px; }
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <h1>Google Fonts untuk Website Modern</h1>
            <p>Tingkatkan desain website dengan ribuan font gratis dari Google Fonts</p>
        </div>
        
        <div class="card-grid">
            <div class="card">
                <h3>Font Berkualitas</h3>
                <p>Ribuan font open source dari desainer terbaik dunia, gratis untuk digunakan.</p>
            </div>
            <div class="card">
                <h3>Mudah Digunakan</h3>
                <p>Cukup copy-paste satu baris kode, dan font siap digunakan di website Anda.</p>
            </div>
            <div class="card">
                <h3>Optimasi CDN</h3>
                <p>Font di-delivery dari server terdekat untuk loading yang cepat.</p>
            </div>
        </div>
        
        <div class="article">
            <h2>Mengapa Menggunakan Google Fonts?</h2>
            <div class="meta">Dipublikasikan: 15 April 2024 | Kategori: Web Development</div>
            
            <p>Google Fonts adalah perpustakaan font gratis yang sangat populer di kalangan web developer. Dengan ribuan pilihan font, Anda bisa menemukan gaya yang tepat untuk merek atau proyek Anda.</p>
            
            <h3>Kelebihan Google Fonts</h3>
            <p>Selain gratis, Google Fonts juga mudah digunakan dan dioptimalkan untuk performa. Font di-delivery melalui CDN (Content Delivery Network) sehingga loading cepat di seluruh dunia.</p>
            
            <h3>Kombinasi Font yang Harmonis</h3>
            <p>Salah satu praktik terbaik adalah menggunakan kombinasi dua font: satu untuk heading (biasanya serif atau bold) dan satu untuk body text (sans-serif yang mudah dibaca).</p>
        </div>
        
        <div class="font-demo">
            <h3>Demo Font Inter (Various Weights)</h3>
            <div class="font-sample">
                <div class="sample sample-regular">
                    <div style="font-size: 24px; margin-bottom: 8px;">Aa</div>
                    <div>Regular 400</div>
                    <div style="font-size: 12px; color: #64748b;">The quick brown fox</div>
                </div>
                <div class="sample sample-medium">
                    <div style="font-size: 24px; margin-bottom: 8px;">Aa</div>
                    <div>Medium 500</div>
                    <div style="font-size: 12px; color: #64748b;">The quick brown fox</div>
                </div>
                <div class="sample sample-semibold">
                    <div style="font-size: 24px; margin-bottom: 8px;">Aa</div>
                    <div>Semi Bold 600</div>
                    <div style="font-size: 12px; color: #64748b;">The quick brown fox</div>
                </div>
                <div class="sample sample-bold">
                    <div style="font-size: 24px; margin-bottom: 8px;">Aa</div>
                    <div>Bold 700</div>
                    <div style="font-size: 12px; color: #64748b;">The quick brown fox</div>
                </div>
            </div>
        </div>
        
        <div class="info-box">
            <h3>Kode yang Digunakan di Halaman Ini</h3>
            <pre><!-- Preconnect untuk optimasi -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 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>
    body {
        font-family: 'Inter', sans-serif;
    }
    h1, h2, h3 {
        font-family: 'Playfair Display', serif;
    }
</style></pre>
            
            <h3 style="margin-top: 20px;">Rekomendasi Font Google Populer:</h3>
            <ul>
                <li><strong>Poppins</strong> → Modern, bersih, geometris (cocok untuk startup, portofolio)</li>
                <li><strong>Roboto</strong> → Netral, profesional (cocok untuk corporate, dashboard)</li>
                <li><strong>Open Sans</strong> → Humanis, bersahabat (cocok untuk edukasi, blog)</li>
                <li><strong>Montserrat</strong> → Bold, urban (cocok untuk heading, website kreatif)</li>
                <li><strong>Inter</strong> → Modern, high legibility (cocok untuk UI modern, dashboard)</li>
                <li><strong>Playfair Display</strong> → Elegan, serif (cocok untuk heading artikel, fashion)</li>
            </ul>
        </div>
    </div>
    
    <footer>
        <p>© 2024 - Belajar Google Fonts | font-family, font-weight, display=swap, multiple fonts</p>
    </footer>

</body>
</html>

Hasil visual website:

Google Fonts untuk Website Modern

Tingkatkan desain website dengan ribuan font gratis

Font yang Digunakan: Playfair Display untuk heading, Inter untuk body text
Kode Import: family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap

Alat Bantu Google Fonts

Beberapa alat yang membantu menggunakan Google Fonts:

  • Google Fonts Website → fonts.google.com (pilih dan dapatkan kode)
  • Font Pair → fontpair.co (rekomendasi kombinasi font)
  • Typewolf → typewolf.com/google-fonts (inspirasi kombinasi font)
  • Google Fonts API → developers.google.com/fonts (dokumentasi lengkap)

Kesalahan Umum Pemula

  • Lupa menambahkan display=swap → Teks bisa tidak terlihat saat font loading (FOIT).
  • Mengambil terlalu banyak weight → Memperlambat loading website.
  • Lupa preconnect → Koneksi ke server Google Fonts bisa lebih lambat.
  • Salah menulis nama font di CSS → Nama font harus sama persis dengan di Google Fonts, termasuk spasi dan huruf besar/kecil.
  • Lupa font fallback → Selalu tambahkan sans-serif atau serif sebagai cadangan.
  • Menggunakan @import di CSS eksternal → @import dapat memperlambat loading (lebih baik pakai <link> di HTML).
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)
  • Pastikan link Google Fonts diletakkan di <head> sebelum file CSS Anda

Latihan Singkat

  1. Buka fonts.google.com dan cari font "Inter"
  2. Pilih weight 400, 500, 600, 700
  3. Copy kode link dan tempel di <head> file HTML
  4. Terapkan font Inter ke seluruh body
  5. Cari font "Playfair Display" untuk heading
  6. Tambahkan ke link yang sama dan terapkan ke h1, h2, h3
  7. Tambahkan preconnect untuk optimasi loading
  8. Simpan dan buka di browser, lihat perubahan font

Intisari Hari Ini

  • Google Fonts → layanan font gratis dari Google dengan ribuan pilihan
  • Gunakan <link> di <head> untuk mengimpor font
  • Pilih weight secukupnya (400, 600, 700) untuk performa optimal
  • Gunakan display=swap untuk menghindari FOIT (Flash of Invisible Text)
  • Preconnect mempercepat koneksi ke server Google Fonts
  • Kombinasi font heading dan body yang harmonis meningkatkan desain
  • Selalu sertakan font fallback (sans-serif, serif) di akhir deklarasi font-family
Tantangan: Buat sebuah halaman landing page dengan kombinasi font dari Google Fonts! Persyaratan:
  • 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 preconnect untuk optimasi loading
  • Gunakan parameter display=swap
  • Pilih minimal 3 weight yang berbeda untuk body text (400, 500, 600, atau 700)
  • Tambahkan hero section, card grid, dan footer
  • Di bagian bawah halaman, tuliskan kode Google Fonts yang digunakan beserta penjelasan weight yang dipilih

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #13 - Typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing
Artikel Selanjutnya: CSS Dasar #15 - Box Model: Margin, Padding, Border, dan Content

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال