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.
Trackback from your site.