Per includere i font non di sistema sulle proprie pagine web possiamo utilizzare il metodo @font-face del CSS3, riconosciuto ormai da quasi tutti i principali browser. È interessante notare che Internet Explorer lo supporta già nelle versioni IE6, IE7 e IE8, particolare fondamentale per essere considerato una reale soluzione cross-browser. In questi vecchi browser, tuttavia, la retro compatibilità sussiste solo incorporando font TTF impacchettati come EOT. Uno strumento utile a questo scopo è EOTFast, un convertitore gratuito di font da TTF a EOT compresso.

Alcuni servizi online, come ad esempio Font Squirrel, forniscono font già “impacchettati” nei seguenti formati:

• TTF – Per quasi tutti i browser, eccetto IE e iPhone
• SVG – Per iPhone e iPad
• EOT – Solo per IE
• WOFF – Emergente, formato compresso, simile a eot

Font Squirrel offre una discreta libreria di font tra cui scegliere, sia gratuiti che a pagamento, e, rispetto alla soluzione offerta da Google Web Fonts,  potrete pure convertire un font in vostro possesso (sempre nel rispetto delle licenze di utilizzo!) tramite l’applicazione @font-face generator.

Guida all’utilizzo

Dopo aver selezionato dal sito ufficiale www.fontsquirrel.com/fontface il font, il subset di caratteri ed i formati che volete incorporare nelle vostre pagine web, scaricate il webfont kit contenuto nel file ZIP indicato ed estraetelo nella cartella del vostro progetto. Dichiarate poi, nella sezione stili del vostro sito, la famiglia di font desiderata ed utilizzatela nella definizione di classi o id css.

Volendo ad esempio includere il noto font Lobster nelle proprie pagine web, dopo il download, dovrete utilizzare il seguente codice:

<style type="text/css">
@font-face {
    font-family: 'Lobster13Regular';
        src: url('Lobster_1.3-webfont.eot'); /* IE9 Compat Modes */
        src: url('Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('Lobster_1.3-webfont.woff') format('woff'), /* Modern Browsers */
        url('Lobster_1.3-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
        url('Lobster_1.3-webfont.svg#Lobster13Regular') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
</style>

A questo punto basterà aggiungere ai vostri stili il nome del font in uno dei modi seguenti (è sempre bene specificare anche un font alternativo o di default):

h1 { font-family: 'Lobster13Regular', cursive; }
#titolo { font-family: 'Lobster13Regular', serif; }
.paragrafo { font-family: 'Lobster13Regular', sans-serif; }

Demo

Abbiamo realizzato un esempio di utilizzo di @font-face per includere in una pagina web il font Lobster, scaricabile gratuitamente da Fontsquirrel.

Causa SPAM, i commenti per questo post sono chiusi.