Webfonts: usiamo font personalizzati per i nostri siti!

Un problema per tutti i webmaster è sempre stato quello di dover fare i conti con i font a disposizione degli utenti. Il webmaster poteva naturalmente scaricarsi un font particolare  e usarlo sulla propria pagina web, ma il visitatore, se non avesse installato anche lui lo stesso font, non l’avrebbe visto. Una vera scocciatura e un notevole limite alla fantasia di chi realizza i siti. Per fortuna il W3C ci viene incontro e nella specifica CSS3 ha introdotto i webfont.

Cosa si intende con webfont? Si intende la possibilità di definire uno o più font personalizzati specificando l’URL del relativo file (ad esempio nel formato TTF). Il browser che supporta questa possibilità andrà a scaricare il font e ad usarlo nella pagina.

Il codice da usare non è troppo complicato. Nel foglio di stile bisogna definire il font personalizzato. E’ bene fare questa definizione come prima cosa.

@font-face {
  font-family: "Il mio font";
  src: url("miofont.ttf");
}

Quindi è possibile usarlo in una definizione:

body {
  font-family: "Il mio font", sans-serif
}

Facile, no?

Purtroppo al momento il supporto è ancora affatto diffuso. Explorer questa volta si distingue in positivo dal resto della truppa supportando la sintassi fin dalla versione 4! Unico inconveniente (non poteva essere diversamente) supporta solo l’inutile formato “Embedded OpenType” (EOT) che è molto poco diffuso e quindi di poca utilità. Safari lo supporta dalla versione 3.1 e supporta i formati “True Type Font” (TTF) e “Open Type Font” (OTF), anche se nella prova che ho fatto non funziona. Anche le future versioni di Firefox (3.5) e Opera (10) lo supporteranno sempre con i formati TTF e OTF.

Un’idea è quella di inserire già il codice per permettere a chi usa i browser più nuovi  di usufruire queste possibilità, gli altri aspetteranno.files/files/

Un commento per “Webfonts: usiamo font personalizzati per i nostri siti!”

Inserito: 07/07/2011 11:46

[…] web font su tutti i browser Intagliato sul ponte CSS Freak da Caribe 1999 il 07/07/2011 alle 11:46 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 […]

Commenta