@font-face Pada Mozilla FireFox

@font-face Pada Mozilla FireFox - Hari ini saya mencoba menggunakan Elusive Icon, semuanya berjalan lancar. Akan tetapi saya menemukan kendala icon tidak muncul pada peramban Mozilla FireFox.

Setelah mecari tau, ternyata secara default FireFox tidak mengizinkan cross-domain untuk font. Artinya, CSS yang menggunakan @font-face tidak akan berjalan pada browser Mozilla FireFox, apabila link font ada pada web lain. Kecuali sobat memakai custom fonts dengan Google Web Fonts.

Firefox hanya menjalankan @font-face dengan kode seperti ini :

@font-face {
  font-family:'Nama Font';
  src:url('files/namafont.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

Itu artinya font hanya akan berjalan pada domain tertentu saja (dengan menggunakan hosting sendiri), sendangkan bagi pengguna blogspot, hal itu tidak mungkin dilakukan. Biasanya kita akan embed font dengan kode seperti ini :

@font-face {
  font-family:'Nama Font';
  src:url('http://namadomain.com/files/namafont.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

Dengan kode di atas, maka font tidak akan berjalan pada browser FireFox.

Solusi

Supaya font bisa berjalan di Firefox, maka sobat tambahkan pada .htaccess pada hosting penyimpanan font sobat.

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Apabila webserver sobat menggunakan ngix maka tambahkan juga kode ini pada virtual host file

location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

Penyimpanan font hanya bisa dilakukan pada hosting sendiri, tidak bisa dilakukan di blogspot. Bagi sobat yang tidak punya hosting, sebagai alternatif link font bisa diconvert ke base64. Akan tetapi, dengan menggunakan base64 tidak valid CSS3.