Come utilizzare i web font su tutti i browser

Warning: Undefined array key "juiz_sps_order" in /membri/saitfainder/wp-content/plugins/juiz-social-post-sharer/inc/front/buttons.php on line 302

Abbiamo già parlato in passato dei Web Font e della relativa at-rule CSS @font-face e ci siamo lasciati con il cruccio di non avere una soluzione cross browser. In questo nuovo articolo presenterò una soluzione molto semplice per ovviare al problema.

La situazione è questa. Attualmente tutti i browser supportano tranquillamente i font True Type (TTF) escluso Internet Explorer che supporta il i font Embedded OpenType (EOT). È vero che questi tipi di font non sono l’ideale per il web, ma essendo molto facili da reperire in genere si finisce per usare quelli. Vediamo quali sono i passi necessari per arrivare a usare i font su tutti i vostri browser.

Come prima cosa occorre cercarsi il font TTF. Ci sono decine di raccolte sul web, usate quella che preferite e magari usate solo quelli di libero utilizzo.

Poi trasformiamo il font TTF in EOT. Ci sono dei servizi online che lo fanno, ma si può anche usare un apposito programmino.

A questo punto definiamo il font nel nostro CSS in questo modo:


@font-face {
font-family: "miofont_ttf";
src: url(font.ttf) format("truetype");
}

@font-face {
font-family: "miofont_eot";
src: url(font.eot);
}

In pratica abbiamo definito due font. I vari browser non riusciranno però a crearli entrambi ed è per questo che ci servono entrambi e dobbiamo usarli in coppia:


h1 { font-family: miofont_ttf, miofont_eot; }


Ecco fatto :-)files/files/