Mengatasi @font-face Google Font Error Di Firefox 2014

Mengatasi @font-face Google Font Error Di Firefox 2014

Bola Hero Gawai

Mengatasi @font-face Google Font Error Di Firefox 2014

@font-face Google Font Terbaru 2014
Baru-baru ini saya mencoba mencari dan memilih 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 bisa memilih dan mencari jenis font yang sesuai dengan keinginan kita di Google Font.

Setelah kita menemukan font yang cocok dengan keinginan kita, selanjutnya kita akan masuk ke halaman setting font untuk memilih style font, menentukan character sets, dan lainnya. Dan kemudian kita bisa 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 lalu tentang link font di head error validasi HTML5? Nah di situ saya menjelaskan, jika 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 melakukan 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 ketika saya extract linknya untuk mendapatkan @font-face dari font tersebut, saya sedikit bingung karena terdapat lebih banyak kode @font-face, padahal saya hanya memilih 1 style dan 1 character sets. Kode-kode tersebut seperti 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 tambahan kode lagi yang dulu tidak ada yaitu terdapatnya kode unicode-range. Karena terlalu banyak kemudian saya hanya memilih untuk option Latin saja dan kemudian saya paste di edit HTML. 

Namun ketika saya coba mengakses blog dengan menggunakan Mozilla Firefox, ternyata font tersebut error.

Setelah saya kutak-katik sana-sini, akhirnya saya mendapatkan solusinya untuk memasang @font-face agar 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 keinginan Anda, kemudian ambil link font-nya dan seperti biasa silahkan simpan dulu link font-nya di bawah kode <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 contoh dari link font saya di atas tadi untuk font Comfortaa adalah 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 agar tidak error sehingga menjadi seperti 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 menggunakan berbagai browser termasuk dengan Firefox. Saya coba dengan Baidu di android pun font berjalan normal begitupun dengan browser Internet Explorer di desktop.

Mudah bukan? Hehehehe....

Dari kode @font-face yang kita dapat 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 sahabat KA mohon dengan hormat untuk mengutarakannya di kolom komentar agar bisa bermanfaat buat kita semua.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×