@font-face e stili di testo

In quest'articolo suggeriamo tre metodi per l'utilizzo di particolari webfonts, niente di nuovo o artificioso ma il nostro scopo come sempre è quello di chiarire un pò le idee.
@font-face e stili di testo

Cufon e SIFR

Negli anni  il problema sull’utilizzo di particolari font veniva colmato con software del tipo “cufon” o “SIFR”, quest’ultimo ad esempio sostituiva il testo applicando degli swf con i font incorporati. Vediamo come evitare questi precessi lunghi e noisi.

Primo Metodo

Rechiamoci su Google Font Directory dove possiamo scorrere tra diversi fonts molto carini. Applicarli è semplicissimo, individuiamo il carattere che ci interessa e clicchiamoci sopra, nella pagina di dettaglio clicchiamo sul tasto “get the code” in modo da avere i codici da incorporare nelle pagine.


Il primo pezzo di codice verrà inserito all’interno della head, assicurandoci di incollarlo prima della riga di importazione del file css,  il secondo pezzo di codice è la proprietà css che richiamerà il font. Il gioco è fatto. Semplice no?

Secondo Metodo

Dalla partnership tra google e typekit.com abbiamo avuto modo di utilizzare il Web Font Loader, un’ api ospitata da google per l’utilizzo di webfont.

Per richiamare l’API basta inserire nella pagina un javascript.

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript"></script>

Dopo aver incluso l’api dobbiamo ora richiedere i font a google o a qualsiasi altro fornitore online di webfont. Ecco il codice:

<script type="text/javascript">
WebFont.load({
google:{
      families:['Lobster']
     },
typekit: {
    id: '<var>myKitId</var>'
  }
});
</script>

Come possiamo notare nel codice, ogni provider ha la sua sintassi di inclusione, nel nostro caso abbiamo utilizzato quella per google e typekit.

Infine basta richiamare nel font-family del css il nome del font. Ecco un esempio:

h1{ font-family:"Lobster", Serif" }

Terzo Metodo

Infine l’ultimo metodo consiste nell’implementare font personali. Da premettere che i font impiegati dovranno essere gratuiti o avere la licenza per poterli pubblicare online.

In questo caso dobbiamo intervenire sul foglio di stile applicando il seguente codice:

@font-face{
    font-family: "MyFont";
    src: url('http://www.nomesito.it/font/exo.eot');
    src:local('MyFont'), url('http://www.nomesito.it/font/exo.ttf') format('truetype');
}

La prima dichiarazione, font-family, serve a specificare il nome del nostro font, possiamo inserirne uno qualsiasi.

La seconda è la sintassi per internet explorer e  restituisce il percorso del font. Come possiamo notare l’estensione del font è .eot ed è l’unico compatibile per internet explorer. A questo indirizzo potete trovare un piccola applicazione online che permette la conversione dei font .ttf a .eot.

L’ultima proprietà rimasta è la sintassi per tutti i restanti browser, ovviamente anche qui ci sarà l’url per il font, in questo caso con estensione .ttf, più il nome.

Dopodichè possiamo usare il nostro font in questo modo:

body {
    font-family:"MyFont", arial, sans-serif;
}

Addio font-safe

Speriamo finalmente di aver colmato quello che era una delle debolezze dei webdesigner, abbandonando una volta e per tutte i classici  Arial, Verdana e Times New Roman.

Alla prossima!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github