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