Cara Memasang Jenis Huruf Google Fast Loading di Template Blog - Remove Blocking Render CSS.
SETIDAKNYA ada tiga3 cara memasang huruf Google (Google Font) di template blog. Jika tidak pasang huruf apa pun, secara default Google akan menampilkan huruf standar Arial atau Sans-serif.
Kita bisa memilih dulu hurufnya di Google Font, lalu kodenya kita pasang di template.
Disarankan memasang huruf yang "umum" saja, gak usah neko-neko, yang penting membuat tulisan jadi enak dibaca.
Baca Juga:
Memasang Google Font biasanya menimbulkan masalah Blocking Render CSS. Untuk menghindarinya, jangan gunakan cara no.1, tapi gunakan nomor 2 dan lebih baik lagi no. 3 di bawah ini.
Kombinasikan (Lebih dari Satu Jenis Huruf):
Contoh:
Contoh:
Font Awesome juga bisa dipasang seperti itu agar Fast Loading.
Simpan di atas kode
Contoh:
Sumber:
reff : http://www.contohblog.com/2015/11/cara-memasang-google-font-fast-loading-blog.html
SETIDAKNYA ada tiga3 cara memasang huruf Google (Google Font) di template blog. Jika tidak pasang huruf apa pun, secara default Google akan menampilkan huruf standar Arial atau Sans-serif.
Kita bisa memilih dulu hurufnya di Google Font, lalu kodenya kita pasang di template.
Disarankan memasang huruf yang "umum" saja, gak usah neko-neko, yang penting membuat tulisan jadi enak dibaca.
Baca Juga:
- Jenis Huruf Terbaik untuk Blog
- Pengaruh Jenis Huruf terhadap SEO
- Cara Mengganti Jenus Huruf
Memasang Google Font biasanya menimbulkan masalah Blocking Render CSS. Untuk menghindarinya, jangan gunakan cara no.1, tapi gunakan nomor 2 dan lebih baik lagi no. 3 di bawah ini.
3 Cara Memasang Google Font di Template Blog
1. Menggunakan Link Format
Simpan di bawah kodeKombinasikan (Lebih dari Satu Jenis Huruf):
2. Menggunakan Font-Face
Simpan di atas kodeUntuk mendapatkan kode font-facenya, copas url link huruf ke address bar dan dapatkan kodenya. Misalnya: http://fonts.googleapis.com/css?family=Open+Sans
Kodenya:
Contoh:
3. Menggunakan Javascript (Recommended)
Simpan di atas kodeFont Awesome juga bisa dipasang seperti itu agar Fast Loading.
Simpan di atas kode
Contoh:
Sumber:
- http://www.gotknowhow.com/articles/how-to-asynchronously-load-font-awesome-css-file
- http://gond3s.com/2014/05/asynchronous-font-awesome.html
- http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule
reff : http://www.contohblog.com/2015/11/cara-memasang-google-font-fast-loading-blog.html
0 comments:
Post a Comment