Introduzione ai web fonts

Un grosso problema per un web designer alle prese con la realizzazione grafica di un sito è quello di scegliere un font piacevole, che corrisponda al carattere del sito, ma soprattutto che sia incluso nella maggior parte – o ancora meglio nella totalità – dei browser e sistemi operativi. E’ inutile scegliere un bellissimo ed elaborato font per i nostri titoli, solo per scoprire che su Ubuntu viene visualizzato come un semplicissimo Times New Roman (o qualcosa di simile) perchè quel tal carattere non è installato.

In tal caso non ci resta altro che suggerire a ciascun utente di scaricarsi il font, così poi vedrà il nostro sito correttamente. 🙂

Ok, non è proprio così, ma la strada è quella giusta. E’ un concetto simile quello alla base dei web fonts, che introduciamo nel resto dell’articolo.

Con il termine web fonts, infatti, NON si intendono delle famiglie di font particolari, magari ottimizzati per il web; ma semplicemente un sistema per cui tali font vengono scaricati direttamente dal web. E perchè no? Nel nostro sito già facciamo scaricare immagini, CSS, JavaScript, filmati Flash… non è certo la definizione di un carattere quella che occuperà il maggior spazio.

Quindi, sì: è possibile definire il font che vogliamo e fare in modo che il browser dell’utente lo scarichi automaticamente.

@font-face

Con la direttiva @font-face possiamo indicare non solo una famiglia di caratteri ma anche una sorgente per il file di definizione di tale famiglia:

@font-face {
font-family: “Kimberley”;
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format(“truetype”);
}

Nell’esempio riportato – tratto da questo articolo su A List Apart – viene definito un certo font Kimberley e l’URL da cui è possibile indicare il relativo file di definizione.

Fatto?

EOT vs. TTF

Purtroppo non tutti i browser ancora lavorano alla stessa maniera, e il formato di font riconosciuto da Internet Explorer non è lo stesso riconosciuto dagli altri. Il browser di casa Microsoft vuole infatti una versione EOT contro la più classica TTF.

Fortunatamente, stanno crescendo ampi repository di font gratuiti per il web disponibili in entrambe le versioni, come Font Squirrel, che è stato segnalato recentemente anche da HTML.it.

Commenti (2)

  • @Federico:
    come quando specifichi una immagine di sfondo, devi mettere l’URL relativo o assoluto del file “TTF” che contiene il font in questione. Ad esempio, potresti mettere il TTF in una cartella “font” nella root del tuo sito, e poi richiamarlo con:

    src: url(/font/iltuofont.ttf)

I commenti sono chiusi.


GiBiLogic srl Società a socio unico  |  via Aldo Moro 48, 25124 Brescia  |  P.IVA 02780970980
REG.IMPRESE N.02780970980 BRESCIA  |  CAP. SOC. € 10.000 I.V.
info@gibilogic.com  |  +39.030.7778980

iubenda Certified Gold
Partner