Trik Dan Tips Menghilangkan Bundle Css Fonts Dengan Script Webfontconfig
Menghilangkan Bundle CSS Fonts Dengan Script WebFontConfig - Pada artikel sebelumnya aku telah mengulas beberapa trik-trik blogging yang m...
https://tutorialcarapintar.blogspot.com/2019/02/trik-dan-tips-menghilangkan-bundle-css.html?hl=in
Menghilangkan Bundle CSS Fonts Dengan Script WebFontConfig - Pada artikel sebelumnya aku telah mengulas beberapa trik-trik blogging yang membahas perihal bundling css seperti Google Fonts API dan Font Awesome. Mungkin kau telah melewatkan-nya jadi silahkan baca disini dan pada artikel ini aku akan kembali menjelaskan hal yang hampir serupa yaitu mengatasi bundling css fonts dengan metode yang berbeda supaya teman-teman blogger mendapat lebih banyak rujukan mengenai cara menghilangkan bundling css tersebut.
Dalam istilah lain WebFontConfig mungkin lebih bersahabat dikenal dengan WebFont Loader yaitu teknik memuat file css tanpa menyertakan sumber-nya, Cara kerja script WebFontConfig ini juga tidak jauh berbeda dengan script loadcss namun di beberapa hal WebFontConfig mungkin sedikit lebih unggul untuk pengoptimalan speed (Web Performance).
Kelebihan WebFontConfig
Dalam istilah lain WebFontConfig mungkin lebih bersahabat dikenal dengan WebFont Loader yaitu teknik memuat file css tanpa menyertakan sumber-nya, Cara kerja script WebFontConfig ini juga tidak jauh berbeda dengan script loadcss namun di beberapa hal WebFontConfig mungkin sedikit lebih unggul untuk pengoptimalan speed (Web Performance).
 |
| Google Fonts Loader |
- WebFontConfig atau WebFont Loader yakni bab dari Google Hosted Libraries, yang merupakan jaringan distribusi konten untuk perpustakaan JavaScript open-source Google Developers.
- Menyajikan durasi cache yang lebih usang dan memangkas waktu pemuatan (loading) yang lebih pendek.
- Mudah di gunakan dan sangat membantu dalam pengoptimalan (Optimasi PageSpeed Insights)
- Support di banyak browser (hampir semua versi browser)
Script WebFont Configuration
<script type='text/javascript'>
//<![CDATA[
WebFontConfig={custom:{families:["FontAwesome"],urls:["https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"]},google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]}},function(){var t=document.createElement("script");t.src=("https:"==document.location.protocol?"https":"http")+"://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js",t.type="text/javascript",t.async="true";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
//]]>
</script>
Tempatkan script WebFontConfig diantara tag <head> dan </head> lalu ganti sumber css "//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" dengan sumber librarie css yang telah ada disitus anda, jangan lupa sesuaikan juga jenis font "Roboto, Oswald" dengan font web anda.
Jika situs anda memakai banyak jenis font, kau sanggup menambahkan sedikit modifikasi script pada bab google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]} menjadi;
example:
google:{families:["Aclonica","Acme","Alegreya"]}
Artikel ini merupakan tanggapan sekaligus solusi untuk cara asynchronously css external, analisa aku mengenai ini "asynchronously css external" dengan script WebFontConfig, mendapat hasil "performa" yang lebih baik dibandingkan dengan internalisasi css. Semoga bermanfaat dan hingga jumpa kembali.
