Workaround: font-face su firefox con i cross cookieless domain

Come avrete notato da oramai un pò di tempo ho deciso di crearmi un tema completamente customizzato per questo blog, e l’ho fatto adottando il framework Thematic. Durante la progettazione del tema sin dall’inizio decisi che il livello di customizzazione avrebbe coinvolto anche i font con cui i contenuti vengono visualizzati.

Questo via css è facile farlo facendo uso della funzione “@font-face” che ci consente di definire dei font custom da usare per il nostro sito, cosi facendo il client che richiama la pagina non ha più bisogno di avere i font preinstallati per poter visualizzare la pagina cosi come è stata pensata.

Ma un sito non è solo customizzazione ma anche ottimizzazione, seo in particolare, ed i canoni seo prevedono che al fine di migliorare i tempi di caricamento è meglio far caricare i contenuti statici (quali font appunto, ma anche immagini, css, js, eccetera..) da un dominio separato, i cosiddetti cookieless domains.

Se analizzerete ad esempio con firebug le pagine di questo blog noterete che i font che state visualizzando vengono caricati non dal dominio “ilportalinux.it” bensi da “static.logubuntu.it”, ecco questo fino a poco fa non avveniva su firefox, o meglio, i font venivano serviti sempre dal mio dominio cookieless, ma Firefox non li visualizzava perchè a quanto pare dalla versione 3.6 in poi non consente di caricare i contenuti statici forniti dalla funzione @font-face da dominio diverso da quello della pagina che stiamo visualizzando.

Quindi in sostanza visualizzando il blog con Chrome tutto era a posto, con Firefox veniva usato il classico font Verdana, e sta cosa non mi è mai andata giù. Finchè con una rapida ricerca su gogol ho trovato un semplice workaround, basta in pratica inserire nell’header HTTP della risposta del server una “acl” che forza Firefox ad accettare i contenuti per la pagina provenienti da qualsiasi dominio origine.

Per usare questo workaround dobbiamo assicurarci che il modulo “headers” di apache sia installato ed attivo, se cosi è possiamo inserire in testa al file .htaccess le seguenti righe:

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Et voilà, come vedete voi stessi adesso i custom fonts funzionano anche su firefox