Jadi Terpelajar Cara Gampang Menciptakan Font Face Google Inline Di Html Blogger For Fast Loading

Cara Praktis Membuat Font Face Google Inline di HTML Blogger For Fast Loading. Google font merupakan salah satu yang dapat mempercantik tampilan blog lebih indah dan cepat terbuka di aneka macam browser. Mayoritas para pelaku web design berupaya untuk mempercantik hasil design template mereka biar lezat dilihat dan dibaca. Namun saya sendiri secara langsung menilai bahwa font bawaan template tidak semuanya dipakai terutama template yang memakai link script external didalamnya yang harus memanggil font tersebut ke server diluar blog.

Karena itulah kalau ada css atau script external, saya selalu ingin membuatnya menjadi internal / inline di html. Sama menyerupai saya merubah semua icon blog ini dari font awesome menjadi SVG Material Design Icon alasannya ialah banyak yang tak terpakai. Saya juga merubah link script external tersebut menjadi internal di html. Bagaimana tertarik untuk mencobanya? Simak yang mau lewat ini.

Pertama; menyerupai kita tahu bahwa link script untuk google font menyerupai ini:

<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,500,700,500i,900' rel='stylesheet'/>

Coba anda kanal link tersebut, anda dapat melihat sendiri seberapa banyak font yang tidak digunakan.

Kedua; silahkan menuju ke web css validator kemudian masukkan url blog dan enter, scroll kebawah dan temukan @font-face yang dipakai blog, untuk mempermudah Ctrl+F

Ketiga; silahkan copy @font-face tersebut
dan paste di html diatas </style> atau */]]></b:skin>.

Saya contohkan @font-face blog ini menyerupai berikut;

@font-face{
 font-family : "'Roboto'";
 font-style : normal;
 font-weight : 300;
 src : local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
 }

pada yang saya tandai diatas, silahkan hapus double tanda kutip biar tidak error sehingga menjadi menyerupai ini;

@font-face{
 font-family : 'Roboto';
 font-style : normal;
 font-weight : 300;
 src : local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
 }

Praktis bukan? itulah yang saya lakukan pada blog ini dan saya bagikan kepada anda semua Cara Praktis Membuat Font Face Google Inline di HTML Blogger For Fast Loading. Selamat mencoba dan semga bermanfaat...