Home  >  HTML/CSS

Typography Lanjutan: Web Font, Google Fonts, dan font-face

Mengapa Tipografi Penting untuk Website?

Tipografi bukan sekadar soal memilih font yang cantik. Di dunia web modern, typography CSS yang tepat dapat meningkatkan keterbacaan, memperkuat identitas brand, dan memberikan pengalaman pengguna yang lebih profesional. Bayangkan website Anda seperti sebuah toko: font yang dipilih dengan baik adalah etalase yang mengundang pengunjung untuk masuk dan betah berlama-lama.

Namun, dulu kita terbatas pada “web-safe fonts” seperti Arial, Times New Roman, atau Georgia. Kini, dengan teknologi web font, kita bisa menggunakan ribuan jenis font kustom yang membuat desain website lebih unik dan menarik.

Apa Itu Web Font dan Mengapa Membutuhkannya?

Web font adalah file font yang diunduh dari server dan ditampilkan di browser pengunjung. Berbeda dengan font sistem yang sudah terinstal di komputer, web font memastikan tampilan typography CSS Anda konsisten di semua perangkat—baik pengunjung menggunakan Windows, Mac, atau ponsel.

Manfaat Utama Web Font:

  • Konsistensi visual: Font tampil sama di semua perangkat dan browser
  • Fleksibilitas desain: Akses ke ribuan pilihan font profesional
  • Branding yang kuat: Ciptakan identitas visual yang unik
  • Meningkatkan engagement: Tipografi yang baik membuat konten lebih mudah dibaca

Cara Mudah Menggunakan Google Fonts

Google Fonts adalah layanan gratis yang menyediakan lebih dari 1.400 font berkualitas tinggi. Ini adalah pilihan paling populer untuk menambahkan web font ke website karena mudah, cepat, dan gratis!

Metode 1: Menggunakan Link (Paling Mudah)

  1. Kunjungi Google Fonts
  2. Pilih font yang Anda suka (misalnya “Poppins”)
  3. Klik tombol “Get font” lalu “Get embed code”
  4. Salin kode <link> dan tempelkan di bagian <head> HTML Anda:
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
</head>
  1. Gunakan font di CSS Anda:
body {
  font-family: 'Poppins', sans-serif;
}

Metode 2: Menggunakan @import

Alternatifnya, Anda bisa mengimpor Google Fonts langsung di file CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

Catatan: Metode link lebih disarankan karena performa lebih baik dibanding @import.

Memahami @font-face: Menggunakan Font Kustom Anda Sendiri

Jika Anda memiliki file font kustom (misalnya dari desainer atau membeli lisensi font premium), Anda bisa menggunakannya dengan aturan @font-face. Ini memberikan kontrol penuh atas font yang Anda gunakan.

Cara Kerja @font-face

@font-face memungkinkan Anda mendefinisikan font kustom dengan menentukan nama font dan lokasi file font-nya.

Contoh Implementasi Sederhana

Misalnya Anda memiliki file font bernama MontserratCustom.woff2 di folder fonts:

@font-face {
  font-family: 'Montserrat Custom';
  src: url('fonts/MontserratCustom.woff2') format('woff2'),
       url('fonts/MontserratCustom.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1 {
  font-family: 'Montserrat Custom', sans-serif;
}

Penjelasan Kode:

  • font-family: Nama yang Anda berikan untuk font ini
  • src: Lokasi file font (gunakan beberapa format untuk kompatibilitas)
  • format(): Memberitahu browser jenis file font
  • font-weight & font-style: Mendefinisikan karakteristik font
  • font-display: Mengatur bagaimana font ditampilkan saat loading

Format Font yang Disarankan:

  • WOFF2: Format modern, ukuran paling kecil (prioritas utama)
  • WOFF: Fallback untuk browser lama
  • TTF/OTF: Kompatibilitas maksimal (opsional)

Tips Optimasi Web Font untuk Performa Maksimal

Web font bisa memperlambat website jika tidak dioptimasi. Berikut tips praktis untuk menjaga website tetap cepat:

1. Gunakan font-display: swap

Properti ini mencegah “invisible text” saat font sedang loading:

@font-face {
  font-family: 'Custom Font';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

2. Preload Font Penting

Untuk font yang langsung terlihat di layar (above the fold), gunakan preload:

<link rel="preload" href="fonts/MainFont.woff2" as="font" type="font/woff2" crossorigin>

3. Batasi Jumlah Font

Gunakan maksimal 2-3 font family dan pilih hanya weight yang benar-benar dibutuhkan. Setiap variasi font menambah ukuran file yang harus diunduh.

4. Gunakan Format WOFF2

Format ini memberikan kompresi terbaik (hingga 30% lebih kecil dari WOFF) dan didukung semua browser modern.

5. Subset Font

Jika website Anda hanya menggunakan karakter Latin, tidak perlu mengunduh karakter Cyrillic atau Asia. Google Fonts secara otomatis melakukan subset berdasarkan bahasa.

Categories:HTML/CSS

Tags:

Related Posts