Usare font personalizzati: tecniche e consigli pratici

I font personalizzati consentono di utilizzare un trattamento tipografico fondamentale per migliorare il design e la User Experience.

Esistono alcuni metodi per utilizzare font personalizzati nelle pagine web che consentono di ottenere risultati simili ma con possibilità di gestione e prestazioni differenti.

Tipologie di font

I formati di font possono essere riassunti in tre gruppi e vengono supportati in modo differente a seconda del tipo di tecnologia utilizzata.

TTF e EOT

Sono i formati più comuni e non sono compressi: il formato EOT è stato creato da Microsoft ed è uno standard supportato solo da Internet Explorer (infatti, è l’unico che IE8 riconosce).

WOFF e WOFF2

Creati da Mozilla in collaborazione con altre organizzazioni, utilizzano una versione compressa. Questi formati possono anche includere informazioni sui metadati e le licenze. WOFF2 fa uso di algoritmi di pre-elaborazione e compressione che garantiscono una riduzione di peso del ~30%.

SVG

È una ricostruzione vettoriale del font che lo rende molto più leggero e ideale per l’utilizzo in modalità mobile. Questo formato è l’unico supportato dalla versione 4.1 e inferiore di Safari per iOS. I font SVG non sono attualmente supportati da Firefox e Internet Explorer.

Browser diverso, rendering differente

Per comprendere correttamente cosa succede quando si utilizzano font non di sistema è bene analizzare come viene processata la chiamata per effettuare il rendering della pagina:

• il browser fa una richiesta al server per ottenere il documento HTML e inizia a costruire il DOM
• una volta indicizzate le risorse CSS e JavaScript crea il CSSOM per costruire il render tree
• il render tree indica quali varianti sono necessarie per il rendering del testo e vengono inviate le richieste per recuperare i font
• il browser definisce il template e inserisce i contenuti sullo schermo (se il font non è ancora stato caricato potrebbe non visualizzare il testo)
• quando font è disponibile il browser inserisce i pixel di testo

Ogni browser inoltre gestisce il rendering in modo diverso:

• Internet Explorer esegue subito il rendering della pagina con il font alterativo se quello richiesto non è ancora pronto, poi eseguire nuovamente il rendering una volta completato il caricamento
• Chrome e Firefox bloccano il rendering per 3 secondi, utilizzano poi un font alternativo ed infine quando scaricano il font corretto lo applicano agli elementi
• Safari effettua il rendering del testo solo dopo aver completato il download del font

Integrazione nel foglio stile

La regola CSS @font-face consente di caricare caratteri personalizzati su una pagina web. Una volta aggiunta, chiede al browser di scaricare il font cambiando l’aspetto delle pagine.

Per gestire un font personalizzato nel foglio stile è necessario definire il nome della famiglia con font-family e il percorso del file ospitato sul server con la proprietà src.

@font-face {

   font-family: 'MyWebFont';

   src: url('webfont.eot'); /* IE9 */

   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

        url('webfont.woff2') format('woff2'), /* Browser Super Moderni */

        url('webfont.woff') format('woff'), /* Browser Moderni */

        url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */

        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

Successivamente basterà associare al contenuto o ad un determinato tag la famiglia font da utilizzare.

body {

   font-family: 'MyWebFont', sans-serif;

}

Perchè la stringa ?#iefix

Internet Explorer (nella versione 9 o precedenti) ha un bug nell’interpretazione dell’attributo src. Se si include più di un formato di carattere, non riesce a caricarlo e segnalerà un errore 404.

La ragione è che tenta di caricare tutto quello che trova tra la parentesi: per correggere il comportamento sbagliato, bisogna dichiarare l’EOT innanzitutto e aggiungere un punto interrogativo che ingannava il browser facendogli “pensare” che nel resto della stringa ci siano parametri (che può quindi ignorare).

Gli altri browser seguono le specifiche e selezionano il formato di cui hanno bisogno in base all’ordine.

Utilizzo Google Fonts

Questo è sicuramente il metodo di utilizzo di importazione font più facile e immediato e che non richiede di ospitare alcun file sul proprio server.

Utilizzando il codice generato da Google Fonts, i server invieranno automaticamente la versione più adatta e più leggera possibile a ogni utente in base alle tecnologie supportate dal proprio browser.

Catatteristiche

A differenza del metodo @font-face qui si utilizza l’integrazione del font tramite la direttiva @import.

@import url('https://fonts.googleapis.com/css?family=Roboto');

Molto comoda, inoltre, la possibilità di escludere gli stili non necessari per ottenere un file più compresso e una maggiore velocità nello scaricamento.

Qui ad esempio verrà importato il font Roboto con solo gli stili ligh, regular e medium.

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

Un altro utilizzo specifico che si può fare è addirittura limitato alle singole lettere, ad esempio per personalizzare un testo specifico, concatenando alla richieste del form il parametro &text=. Questo permette di ottenere chiamate da pochi byte.

@import url('https://fonts.googleapis.com/css?family=Roboto&text=Google');

Font per il testo, ma anche icone

L’integrazione di un font personalizzato apre anche la possibilità di gestire librerie di icone completamente manipolabili da codice: il grosso vantaggio è il controllo di dimensioni, colori e altri parametri tramite CSS e una semplice integrazione HTML.

Tra le librerie più famose librerie gratuite c’è sicuramente Font Awesome (nata per l’utilizzo con Twitter Bootstrap), ma ne esistono molte altre come IcoMoon o Elusive Icons.

Il modo più efficiente per l’integrazione è quello di creare una libreria personalizzata composta solo dalle icone che realmente saranno utilizzate: questo consente di ottenere una considerevole riduzione di peso delle risorse (anche oltre il ~98%).

Fontello è un’ottimo tool online che consente di selezionare le icone necessarie da svariate librerie per crearne una personalizzata.

Peso e prestazioni della pagina

I font personalizzati consentono di arricchire il design ma è basilare prestare attenzione sull’impatto che hanno su caricamento e velocità.

Possono a volte generare punti di blocco nel Critical Rendering Path a seconda della modalità e la complessità di costruzione del template.

Esistono alcune tecniche per rimandare il caricamento come il Web Font Loader, una libreria JavaScript sviluppata da Google e da Typekit che permette una gestione avanzata del caricamento.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

<script>

   WebFont.load({

      google: {

         families: ['Droid Sans', 'Droid Serif']

      }

   });

</script>

Questi metodi sono di estremo aiuto ma devono essere utilizzati adeguatamente o si rischia di far emergere problematiche di rendering come il FOUT.

Viene chiamato FOUT il fenomeno che si presenta quando una pagina si carica con il font di sistema e poi viene applicato dopo qualche secondo quello personalizzato creando un effetto flash poco gradevole.