Dalam istilah lain WebFontConfig mungkin lebih erat 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
- WebFontConfig atau WebFont Loader ialah 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>
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;
google:{families:["Aclonica","Acme","Alegreya"]}Artikel ini merupakan balasan 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.