WebFont (@font-face) - Cross Domain

WebFont pada css biasa digunakan untuk menggunakan jenis font yang berbeda sehingga tulisan di website memiliki ciri lain dari website yang ada. Pasti beberapa orang yang berkecimpung di web designer pasti akan mengalami hal yang sama di firefox/mozilla yakni font tidak bekerja, itu dikarenakan font pada css mengalami cross domain yakni mengambil/mengarahkan font pada domain yang berbeda. 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://www.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!

Server Apache:

Sobat tambahkan pada .htaccess pada hosting penyimpanan font sobat.

AddType application/octet-stream .eot 
AddType application/x-font-ttf .ttf 
AddType application/font-otf .otf 
AddType application/font-woff .woff 
AddType image/svg+xml .svg .svgz 
AddEncoding gzip .svgz 
<FilesMatch "\.(eot|ttf|otf|woff|svg)$"> 
 Header set Access-Control-Allow-Origin "*" 
</FilesMatch>

Server Nginx:

Tambahkan script berikut pada konfigurasi nginx

location / 
{ 
 ..... 
 
 if ($request_filename ~* ^.*?\.(eot)|(ttf)|(woff)|(svg)|(otf)$){ 
  add_header Access-Control-Allow-Origin *; 
 } 
 
 ...... 
}

kemudian tambahkan konfiguras mime type agar extensi font bisa di kenali oleh web server edit file  /etc/nginx/mime.types tambahkan script berikut

types { 
 ..... 
 
 application/x-font-ttf ttf; 
 application/font-otf otf; 
 application/octet-stream   eot; 
 application/font-woff woff; 
 
 ..... 
}

restart nginx untuk menjalankan perubahan. Selesai.