Mengatasi @Font-Face Google Font Error Di Firefox 2014

Baru-baru ini saya mencoba mencari dan menentukan jenis font yang cocok untuk mengganti font untuk title blog dan title postingan blog Kompi Ajaib di Google Font. Sebenarnya tidak ada yang aneh atau berbeda pada tampilan Google Font ini. Seperti biasa kita sanggup menentukan dan mencari jenis font yang sesuai dengan cita-cita kita di Google Font.

Setelah kita menemukan font yang cocok dengan cita-cita kita, selanjutnya kita akan masuk ke halaman setting font untuk menentukan style font, menentukan character sets, dan lainnya. Dan kemudian kita sanggup copy link font-nya dan font-family untuk dipasang di edit HTML blog kita. Nah tidak ada yang aneh kan? Lantas di mana yang aneh dan bedanya?

Masih ingat dengan postingan saya yang kemudian perihal link font di head error validasi HTML5? Nah di situ saya menjelaskan, bila kita memasang link font di head maka akan terdetek render-blocking CSS di pagespeed. Nah cara untuk mengatasi render-blocking CSS ini yaitu kita buat sebagai inline CSS atau meletakan @font-face dari font tersebut.

Nah kali ini saya juga bermaksud untuk melaksanakan inline CSS dari font Comfortaa yang saya pilih dengan setting light 300 dengan character sets Latin dengan link font sebagai berikut:

 <link href='http://fonts.googleapis.com/css?family=Comfortaa:300' rel='stylesheet' type='text/css'/>

Namun saat saya extract linknya untuk mendapatkan @font-face dari font tersebut, saya sedikit resah alasannya yaitu terdapat lebih banyak kode @font-face, padahal saya hanya menentukan 1 style dan 1 character sets. Kode-kode tersebut menyerupai di bawah ini.

 /* cyrillic-ext */
 @font-face {
   font-family: 'Comfortaa';
   font-style: normal;
   font-weight: 300;
   src: local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSCq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
   unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
 }
 /* cyrillic */
 @font-face {
   font-family: 'Comfortaa';
   font-style: normal;
   font-weight: 300;
   src: local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSCpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek */
 @font-face {
   font-family: 'Comfortaa';
   font-style: normal;
   font-weight: 300;
   src: local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSCqaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
 /* latin-ext */
 @font-face {
   font-family: 'Comfortaa';
   font-style: normal;
   font-weight: 300;
   src: local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSCj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
   font-family: 'Comfortaa';
   font-style: normal;
   font-weight: 300;
   src: local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSCjy24DTBG-RpCwXaYkM4aks.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }

Dan ada satu komplemen instruksi lagi yang dulu tidak ada yaitu terdapatnya instruksi unicode-range. Karena terlalu banyak kemudian saya hanya menentukan untuk option Latin saja dan kemudian saya paste di edit HTML. 

Namun saat saya coba mengakses blog dengan memakai Mozilla Firefox, ternyata font tersebut error.

Setelah saya kutak-katik sana-sini, jadinya saya mendapat solusinya untuk memasang @font-face biar tidak error dan untuk mengatasi render-blocking CSS di pagespeed. Jika kebetulan Anda mengalami hal yang sama silahkan coba trik yang saya lakukan di bawah ini.

1. Langkah Pertama

Seperti biasa silahkan pilih font sesuai cita-cita Anda, kemudian ambil link font-nya dan menyerupai biasa silahkan simpan dulu link font-nya di bawah instruksi <head> dan save template Anda.

2.Langkah Kedua

Silahkan masuk ke W3C CSS Validator DI SINI kemudian silahkan masukan link blog Anda untuk divalidasi. Lalu silahkan scroll ke bawah dan temukan @font-face blog kita, sebagai pola dari link font saya di atas tadi untuk font Comfortaa yaitu sebagai berikut.

 @font-face {
 font-family : "'Comfortaa'";
 font-style : normal;
 font-weight : 300;
 src : local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSConF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
 }

Perhatikan pada font-family di atas, silahkan hapus tanda double kutip ("") nya biar tidak error sehingga menjadi menyerupai ini.

 @font-face {
 font-family : 'Comfortaa';
 font-style : normal;
 font-weight : 300;
 src : local('Comfortaa Light'), local('Comfortaa-Light'), url(http://fonts.gstatic.com/s/comfortaa/v7/r_tUZNl0G8xCoOmp_JkSConF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
 }

Kemudian silahkan simpan di edit HTML dan jangan lupa hapus link font yang tadi kita simpan sebelumnya. Sekarang silahkan coba cek dengan mengaksesnya memakai banyak sekali browser termasuk dengan Firefox. Saya coba dengan Baidu di android pun font berjalan normal begitupun dengan browser Internet Explorer di desktop.

Praktis bukan? Hehehehe....

Dari kode @font-face yang kita sanggup dari CSS validator, ada perbedaan yang cukup mencolok yaitu format font yang berbeda atau berubah yang asalnya format woff2 menjadi format truetype.

Jika ada koreksi dari sobat KA mohon dengan hormat untuk mengutarakannya di kolom komentar biar sanggup bermanfaat buat kita semua.

Sumber https://www.kompiajaib.com/

Share this post