CSS Font Fallbacks (Tutorial CSS Part 39)

Gambar 39: Logo CSS

CSS Font Fallbacks: Solusi Aman untuk Tampilan Font yang Konsisten

Saat mendesain tampilan web, salah satu elemen penting yang sering kali kita perhatikan adalah font. Tapi, tahukah kamu kalau tidak semua font akan tampil sama di setiap perangkat atau browser? Nah, di sinilah font fallback berperan.

Apa Itu Font Fallback?

Font fallback adalah daftar alternatif font yang akan digunakan jika font utama tidak tersedia di perangkat pengguna. Jadi kalau browser nggak bisa menampilkan font pertama, dia otomatis pakai font kedua, ketiga, dan seterusnya dalam daftar.

Contohnya seperti ini:

p {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

Penjelasannya:

Jika ‘Roboto’ tidak ada, maka browser coba ‘Helvetica’.
Kalau ‘Helvetica’ juga tidak ada, dia lanjut ke ‘Arial’.
Dan kalau semuanya gagal, barulah digunakan sans-serif sebagai generic font terakhir.

Kenapa Font Fallback Itu Penting?

Konsistensi Tampilan
Supaya teks tetap terbaca dan tampil rapi walaupun font utamanya nggak tersedia.
User Experience Lebih Baik
Pengguna nggak akan melihat teks dengan font aneh yang nggak kamu maksudkan.
Menghindari Masalah Loading Font
Kalau font dari Google Fonts atau font custom gagal dimuat, fallback-nya langsung ambil alih.

Font Fallback yang Umum Digunakan

Berikut beberapa kombinasi font fallback yang sering dipakai:

1. Arial, Helvetica, sans-serif

body {
  font-family: Arial, Helvetica, sans-serif;
}

Ini adalah salah satu fallback paling aman. Arial dan Helvetica tampil mirip, dan sans-serif sebagai cadangan akhir.

2. Georgia, Times, 'Times New Roman', serif

p {
  font-family: Georgia, Times, 'Times New Roman', serif;
}

Kombinasi ini cocok untuk tampilan bergaya klasik dan formal.

3. 'Courier New', Courier, monospace

code {
  font-family: 'Courier New', Courier, monospace;
}

Biasanya digunakan untuk tampilan kode atau teks monospace.

4. 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

button {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Dipakai untuk elemen antarmuka modern, mirip font bawaan di Windows.

Contoh Kode HTML + Internal CSS

Berikut contoh kode HTML sederhana dengan internal CSS yang menggunakan font fallback:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Font Fallback</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
      background-color: #f9f9f9;
    }

    h1 {
      font-family: Georgia, Times, 'Times New Roman', serif;
      color: #333;
    }

    p {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
    }

    code {
      font-family: 'Courier New', Courier, monospace;
      background-color: #eee;
      padding: 4px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <h1>Contoh Penggunaan CSS Font Fallback</h1>
  <p>Ini adalah paragraf menggunakan font fallback: Arial, Helvetica, sans-serif.</p>
  <p>Berikut adalah contoh kode: <code>font-family: Arial, Helvetica, sans-serif;</code></p>

</body>
</html>

Hasilnya:

Gambar 39.1: Contoh CSS Font Fallbacks

Tips Penggunaan Font Fallback

Selalu akhiri dengan generic font family seperti serif, sans-serif, atau monospace.
Gunakan kutip untuk nama font yang mengandung spasi, misalnya 'Times New Roman'.
Pastikan urutannya dari yang paling kamu inginkan ke yang paling umum.

Kesimpulan:

Font fallback itu penting banget buat menjaga tampilan teks tetap konsisten di berbagai perangkat. Dengan menuliskan beberapa alternatif font, kamu bisa memastikan bahwa web kamu tetap terlihat rapi, meskipun font utama gagal dimuat.

Yuk, mulai biasakan nulis font-family lengkap dengan fallback-nya di setiap styling!

filesop.com