Includere font non standard nei nostri siti

Molti ignorano il fatto che sia possibile con pochi passi includere nei siti web font differenti dai soliti font standard. Non è necessario essere dei maghi della programmazione o chissà cosa.

Ci viene in aiuto un sito, Font Squirrel:

Nella pagina linkata sopra sono presenti una miriade di font suddivisi per categoria. Selezioniamo il nostro preferito. Abbiamo la possibilità di esaminarlo più nel dettaglio, guardare la mappa caratteri e fare delle simulazioni, poi clicchiamo sulla voce @font-face Kit e successivamente sul pulsante  Download @font-face Kit.

Scaricati i file è ora di caricarli sul nostro sito. Il file zip è comprensivo di una demo, di un css e del font in diversi formati, ttf, eot, woff, svg, quest’ultimi necessari per la corretta visualizzazione nei diversi browser.

A questo punto non ci resta che inserire nel foglio di stile il codice presente nel file stylesheet.css, per intenderci quello tipo @font-face{ … } facendo attenzione a mettere il percorso esatto dove c’è l’url del font. In questo modo diciamo al browser di scaricare il font.

Ora dobbiamo dirgli di usarlo! Sarà fatto come un comune font, cioè con font-family: ‘NomeFontCaricato’.

Consiglio di non esagerare includendo tutta la famiglia di font se non è proprio necessario, risulterebbe più pesante in termini di kb.

Questa tecnica funziona sulla maggior parte dei browser e dispositivi mobili:

  • Firefox 3.5+
  • Opera 10+
  • Safari 3.1+
  • Chrome 4.0.249.4+
  • Internet Explorer 4+
  • iPad e iPhone

Lo stesso Font Squirrel mette a disposizione un generatore di kit, @font-face Generator, nel caso in cui non ci soddisfino i font già presenti possiamo caricarne uno dal nostro pc è generare tutti i file necessari.

Ma fate attenzione ai copyright del vostro font, includendolo nel vostro sito lo rendereste scaricabile.

Un servizio simile lo offre il colosso Google con Google font directory

In questo caso non è necessario scaricare e caricare nessun file sul proprio sito, ma basta inserire nell’head una riga del tipo:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>

e poi richiamare il font nel nostro css con il classico font-family. Purtroppo la lista è molto limitata, almeno per il momento.

QuicksandBold

L