Per inserire font esclusivi nei nostri progetti possiamo usare le regole @font-face. Queste regole fanno in modo di collegare font presenti sul nostro server e utilizzarli per stilizzare il testo sulla pagina, proprio come si collegano le immagini. La regola @font-face faceva parte di CSS2, rimossa nel CSS 2.1 e tornata in CSS3.
Fino adesso, senza i font web (i font incorporati), i web designer erano limitati alla ridotta quantita’ di font comuni presenti sui computer degli utenti. I designer che non volevano utilizzare solo Arial, Verdana o Georgia dovevano ricorrere a immagini, Flash o script per creare il loro testo esclusivo. Utilizzando @font-face, invece, la pagina mantiene un testo reale. Il lavoro richiesto per implementare la regola @font-face puo’ limitarsi a scrivere il seguente codice nel CSS:
@font-face{
font-family: nomefont;
src: url(percorso del font/nomefont.otf);
}
Questa e’ in sintesi la regola @font-face, ma in realta’ utilizzarla e’ un po’ piu’ complicato.
SCEGLIERE FONT ACCETTABILI
Uno dei grossi problemi con i font web e’ che non tutti i font possono essere utilizzati sulle pagine web. Alcuni hanno limiti di licenza, altri non hanno un bell’aspetto per il web. Analizziamo insieme queste due problematiche.
PROBLEMI DI LICENZE
Quando si deve scegliere il font per il nostro progetto, consiglio di dare un’occhiata alla sua licenza (EULA) o alle sue condizioni di utilizzo, per scoprire se e’ consentito incorporarlo come font web. Le licenze di molti font non lo consentono, perche’ quando utilizzate @font-face, il file del font viene scaricato nella cache nel computer dell’utente, proprio come le immagini. L’utente, quindi, puo’ accedere alla sua cache e scaricarsi il font e installarlo sul suo sistema. Molti produttori di font non intendono concedere il loro prodotto a tutti quelli che visitano il nostro sito.
E’ anche vero che trovo difficile che un’utente si prenda la briga di fare tutti quei passaggi per installarsi un font, ma fortunatamente molte licenze dei font non tengono conto di @font-face, percio’ quando leggiamo la licenza di un font, potrebbe non dire niente sul divieto di incorporamento con la regola @font-face. Detto questo, se avete degli scupoli a utilizzare un font, o siete pigri nel leggere le sue licenze, ci sono molti luoghi online in cui trovare font da licenze che consentono l’incorporamento sul web:
www.theleagueofmoveabletype.com
www.fontsquirrel.com
www.kernest.com
www.fontfabric.com
www.fonthead.com
www.fontspring.com/fontface
PROBLEMI DI VISUALIZZAZIONE E LEGGIBILITA’
Dopo aver risolto il problema delle licenze, bisogna evitare di caricare le pagine di qualsiasi tipo di font bizzarro. Nello scegliere un font ci si deve assicurare che migliori la leggibilita’ del testo e non che la peggiori. Ogni volta che scegliamo di utilizzare un font web, dobbiamo avere una ragione precisa per scegliere quel determinato font, oltre al suo aspetto. Proviamo sempre i font web con il contenuto delle nostre pagine per vedere se funzionano.
Il font scelto potrebbe andare bene per i titoli grandi ma risultare troppo sottile per una corretta visualizzazione e una buona leggibilita’ del corpo del testo. Molti font commerciali non sono progettati per essere visualizzati in piccole dimensioni sullo schermo, percio’ in molti casi ha piu’ senso riservare @font-face per titoli e continuare a utilizzare i font web-safe per il corpo del testo.
Alla prossima!