mengaktifkan web font cross domain via htaccess nginx dan apache

Lagi-lagi bermasalah sama yang namanya cross domain X_X, kali ini masalahnya muncul ketika saya menggunakan custom web fonts yang saya akses dari domain yang berbeda, katanya sih butuh header khusus. Tapi masalah tersebut hanya muncul di browser firefox, pesan error yang di tampilkan seperti ini :

[12:47:37.034] downloadable font: download failed (font-family: "MuseoSlab500" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://example.com/gui/asset/fonts/Museo_Slab_500-webfont.woff @ http://example.com/gui/asset/css/comment_new.css
[12:47:37.132] downloadable font: download failed (font-family: "MuseoSlab500" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: http://example.com/gui/asset/fonts/Museo_Slab_500-webfont.ttf @ http://example.com/gui/asset/css/comment_new.css



solusinya tambahkan header pada file htaccess di web server.

untuk web server nginx :

tambahkan script berikut pada konfigurasi nginx misal file tersebut berada di 
/etc/nginx/sites-enabled/default


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.


Untuk web server apache lebih mudah lagi, edit file .htaccess tambahkan script berikut :

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 "\.(ttf|otf|eot|woff|svg)$"="">
        <ifmodule mod_headers.c="">
                Header set Access-Control-Allow-Origin "*"
        </ifmodule>
</filesmatch>
Restart apache untuk menyimpan perubahan

Komentar

Posting Komentar

Postingan populer dari blog ini

membuat bot plurk dengan php

Gambar
Salam.. Pagi ini mungkin saya orang yang menjengkelkan bagi temen" plurk, karena saya nge fload atau nyepam di tret plurk dengan kata hello (bye) . (doh) maap yah temen" atas keusilan saya.. eh tepatnya bot saya yang usil (devil). Okeh deh semoga dimaafkan.. :). sebenernya ini melanjutkan mainan saya dengan plurk API yang kmaren diawali dengan menginstall lamp , dan kemudian menginstall paket lainya seperti libCURL dan php5-cli. Sebenarnya paket-paket ini tidak perlu diinstall apabila kita mempunyai hosting sendiri untuk menaruh file tersebut.
Baca selengkapnya

13 12 11

Gambar
13,12,11, lagi ngitung mundur yah ?? kelamamaan kalau dari 13, knapa ga mulai dari angka 3 ?  woooi... Itu bukan ngitung mundur sodara sodara, itu angka yang saya ambil dari tanggal 13, bulan 12, tahun 20 11. Terus knapa sama angka itu ?? Ya Alhamdulillah hari ini saya berkurang jatah umurnya dan Alhamdulillah masih di beri kesempatan hidup sampai saat ini, biarpun nulis blogny sambil ngelap ingus yang meler tiada henti X_x Ngomong-ngomong soal angka 3 saya mau cerita.. rumah saya nomer 333, rt 3, rw 3. provider gsm pun pake yang angka 3 ups... malah curcol :D Eh iya ternyata teman satu kantor saya, namanya  linggar  juga ulang tahun hari ini. Buat semua yang udah ngucapin ini hadiahnya.. tumpeng.. kalau mau dateng ke kantor :P.   tumpengan 131211 nb : Terima kasih buat semua ucapan dan doanya ... 
Baca selengkapnya