Bagaimana cara Anda membuat Google Fonts dapat dimuat lebih cepat di situs Anda? Hal ini tidak biasa melihat font unstyled atau font baku yang berbeda dimuat dan kemudian digantikan oleh Google web fonts Anda yang mengarah menjadi sebuah teks tak bergaya dalam sekejap!
Hal ini terjadi karena ketika pengunjung mengunjungi situs Anda, browser memuat font web default yang aman seperti Arial dan lain-lain yang disarankan dalam file CSS, lalu ketika font Google dimuat, ia mengganti font default dengan font Google, namun untuk beberapa detik awal saja, itu merusak pengalaman desain web untuk situs web Anda, dan mengganggu pengunjung. Jadi Anda perlu memuat font Web tampil lebih cepat dan cara yang benar.
Kita coba menggunakan font Oswald untuk headline dan font Open Sans untuk teks artikel. Lihat bagaimana kita memuatnya dengan hasil yang optimal.
Pertama Memuat Google Font
Tempatkan kode impor Google sehingga memuat yang pertama setelah tag HEAD html, bahkan sebelum file CSS. Ini akan memastikan bahwa beban font sebelum CSS. Ingat bahwa karena file CSS berikut, Anda dapat memberi gaya pada tag Anda dengan font di file CSS.
Gunakan Format Link
Google font menyediakan 3 cara untuk memuat Google web fonts – @import, link rel dan javascript. Menggunakan tag link rel akan memungkinkan kamu untuk menempatkan kode di atas html dan memuatnya sangat cepat sebelum file CSS.
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Kode @import perlu untuk dimasukkan ke dalam file CSS, dan meskipun kamu boleh menambahkannya di atas file CSS, kamu mungkin masih mendapatkan sebuah teks tak bergaya sekejap (FOUT) – yang merupakan sebuah pengalaman yang buruk bagi pengunjung Anda.
Memuat Lebih Sedikit Font
Jadi mengapa Anda membutuhkan 4 Google font untuk ditampilkan pada setiap halaman. Ide bagus untuk memilih maksimal dua font – satu jenis huruf tebal untuk judul dan font dengan keterbacaan tinggi untuk artikel tersebut. Semakin banyak font yang Anda pilih, semakin lama font akan memuat.
Mengkombinasikan Kode Font
Anda dapat memuat beberapa font Google dengan satu baris kode. Anda tidak perlu menyisipkan kode satu baris untuk setiap font yang Anda muat. Lihat contoh di bawah ini dimana kita menggabungkan font Open Sans dan Oswald.
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>
Muat Varian Default
Setiap opsi font memungkinkan Anda memuat berbagai gaya font. Apakah Anda benar-benar perlu menambahkan semua varian dan beberapa kali beban beberapa kali lipat. Memuat beberapa varian sama dengan memuat beberapa font. Pilih gaya default setiap font dan hanya akan memuat satu varian.
Jika kamu pilih menu customize pada Google font akan terlihat “load time” dari font yang akan dimuat, hanya satu gaya yang dipilih waktu memuat font akan lebih cepat.
Sementara jika kamu memilih hampir semua opsi gaya yang ada “load time” dari font akan lebih lambat ini akan berpengaruh dengan font yang tak bergaya muncul sekejap sebelum ke font yang sebenarnya.
Muat Font yang lebih cepat
Laman Font Google untuk setiap font membuatnya sangat jelas berapa lama font akan dimuat. Meter beban di samping font menunjukkan seberapa cepat setiap font akan dimuat. Jika Anda terus menambahkan lebih banyak font, semakin lama waktu yang diperlukan untuk memuat. Beberapa font berat dan bisa memakan waktu hampir dua kali lipat. Jadi pilihlah dengan bijak dan pilihlah font dengan waktu muat yang lebih cepat.
Gunakan Web Font Loader
Bagi mereka yang hanya ingin memuat Google font mereka sebelum CSS dimuat dan harus benar-benar yakin tidak ada kejutan teks yang tidak mencolok, gunakan web font loader – javascript yang akan memastikannya dimuat sebelum situs lainnya dan hindari kilatan teks unstyled apapun. Meskipun skrip asinkron tersedia, lebih baik menggunakan skrip sinkron untuk memastikan font Anda dimuat terlebih dahulu.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <script> WebFont.load({ google: { families: ['Open Sans', 'Oswald'] } }); </script>
Jadi untuk mendapatkan pengaruh yang lebih baik terhadap desain website Anda, cobalah trik Google font.
Sumber: quickonlinetips.com
Leave a Reply