Web Font Loader è una libreria javascript che consente di gestire la fase in cui il browser scarica il web font e lo applica al testo.

Infatti, può accadere, a causa di connessioni lente o quando si utilizzano molti font o immagini, che il browser visualizzi il testo prima con il font predefinito (ad esempio, Times New Roman) e poi, dopo aver scaricato il file del font, con il font scelto.

Questo ritardo nell’applicazione di un web font è stato denominato da Paul Irish con il nome FOUT (Flash Of Unstyled Text). Ulteriori informazioni possono essere trovate nel suo post Fighting the @font-face FOUT.

Web Font Loader è sviluppato da Google e da Typekit e può essere utilizzato per gestire sia i web fonts che i Google fonts. È distribuito con licenza Apache v2.

Usare Web Font Loader con @font-face

Il funzionamento di questa libreria è molto semplice: nascondere il testo fin quando il file del font non è stato scaricato e applicato dal browser e solo allora, visualizzare il testo.

La libreria imposta nell’elemento html una classe diversa in ciascuna fase del caricamento del font:

  • .wf-loading, durante la fase di scaricamento del file del font. Durante questa fase il testo dovrebbe essere nascosto.
  • .wf-active, subito dopo l’avvenuto scaricamento del file del font. Il testo può essere visualizzato.
  • .wf-inactive, se il web font non può essere applicato per qualche motivo  si può indicare in questa classe un font web-safe di ripiego.

Nella seguente immagine è visibile la classe .wf-active applicata all’elemento html dopo che il font è stato applicato al testo.

Le classi applicate da Web Font Loader

Le classi applicate da Web Font Loader – (Fare clic per visualizzare la demo)

Vediamo in dettaglio come applicare il web font.

Definire le regole css che saranno applicate all’elemento che utilizza il web font, nell’esempio è un elemento h2.

.wf-loading h2{ 
  /* In alternativa si può usare visibility: hidden; */
  opacity:0; 
}
.wf-active h2{
  /* In alternativa si può usare visibility: visible; */
  font-family: 'ambleregular';
  font-size: 300%;
  text-align: center;
}
.wf-inactive h2{
  font-family:Arial, Helvetica, sans-serif;
  font-size: 270%;
  text-align: center;
  opacity:1;
  transition: 2s;
}

La visibilità dell’elemento può essere modificata con la proprietà visibility o con la proprietà opacity. In quest’ultimo caso si può visualizzare il testo con una transizione per rendere più graduale l’effetto.

Includere Web Font Loader con un elemento script e poi, attivare la libreria.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['ambleregular'], 
    urls : ['css/fonts/amble/stylesheet.css'],
    timeout: 2000
  }
});
</script>

La libreria Web Font Loader permette di specificare una serie di opzioni tra cui quelle utilizzate nell’esempio:

  • families, indica la famiglia di caratteri come indicata nella regola @font-face
  • urls, indica il percorso del foglio di stile contenente la regola @font-face con cui si definisce il font
  • timeout, indica il tempo massimo (in milisecondi) consentito per il download del font, dopo il quale viene applicata la classe .wf-inactive. Il tempo predefinito è 5 secondi (5000).

Infine, nel file css a cui punta la proprietà urls, nell’esempio il file css/fonts/amble/stylesheet.css, c’è la regola @font-face con l’indicazione del file del font nei vari formati.

@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.eot');
    src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Per ulteriori informazioni consultare la documentazione ufficiale di Web Font Loader.