Tipografi adalah kunci utama agar pengunjung betah membaca konten di blog Anda. Namun, salah dalam menambahkan Google Fonts bisa berakibat fatal pada kecepatan loading website (Core Web Vitals).
Hari ini di MHFSDEV, kita akan membahas cara paling efisien untuk menambahkan Google Fonts ke proyek web Anda tanpa memperlambat performa.
1. Menggunakan Tag <link> (Paling Direkomendasikan)
Cara ini adalah yang paling umum dan paling cepat diproses oleh browser. Letakkan kode ini di dalam bagian <head> HTML Anda.
<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@400;700&display=swap" rel="stylesheet">
Catatan Penting: Perhatikan atribut &display=swap. Ini sangat penting untuk SEO karena memastikan teks tetap muncul (menggunakan font sistem) sebelum Google Fonts selesai dimuat sepenuhnya.
2. Menggunakan @import di CSS
Jika Anda tidak ingin mengotori file HTML, Anda bisa memasukkannya langsung di file CSS. Namun, gunakan cara ini dengan bijak karena bisa sedikit lebih lambat dibanding metode pertama.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body {
font-family: 'Inter', sans-serif;
}
Tips Optimasi Agar Website Tetap Kencang
Pilih Hanya Style yang Dibutuhkan
Jangan mencentang semua variasi font (Thin, Light, Regular, Bold, Black). Setiap variasi menambah beban ukuran file. Cukup pilih Regular (400) dan Bold (700) untuk penggunaan standar.
Gunakan Preconnect
Dua baris kode preconnect di atas membantu browser melakukan koneksi ke server Google Fonts lebih awal, sehingga proses download font menjadi lebih singkat.
Cara Menggunakan di CSS
Setelah link terpasang, panggil font tersebut dalam properti CSS Anda:
h1 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
}
p {
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
Kesimpulan
Google Fonts adalah alat yang luar biasa, tetapi efisiensi adalah kunci. Gunakan preconnect dan batasi jumlah variasi font agar website Anda tidak hanya cantik, tapi juga mendapat skor tinggi di Google PageSpeed Insights.
Apakah Anda memiliki font favorit untuk proyek web? Bagikan di kolom komentar ya! Besok kita akan mereview mengapa Vue.js menjadi pilihan menarik untuk pemula. Tetap di MHFSDEV!
0 Comments