Questo articolo è adatto a chiunque, dai principianti anche ai più esperti sviluppatori web. Ho visto Senior Web Developer con decenni di esperienza ignorare i font e non gestirli correttamente, quindi continua a leggere.

Dopo aver letto alcune righe qui sotto utilizzerai il corretto @font-face e CSS che funzionerà su tutti i browser.

Il tuo sito web apparirà e funzionerà come dovrebbe su tutti i dispositivi.

Cosa sono i font face?

Presumo che tu lo sappia già, altrimenti non staresti leggendo questo articolo.

Tuttavia per completezza, un @font-face consente di incorporare font specifici in un sito web senza che l’utente remoto debba averli installati sul proprio sistema.

I tipi di font disponibili sono: “.woff”, “.woff2”, “.ttf”, “.otf”, “.eot” e “.svg”.

  • .woff sta per Web Open Font Format
  • .woff2 sta per WOFF 2.0 - Web Open Font Format
  • .ttf, .otf sta per TTF/OTF - TrueType e OpenType
  • .eot sta per EOT - Embedded OpenType
  • .svg sta per SVG fonts

Ogni browser ha il “proprio” supporto per questi tipi (purtroppo), quindi devi tenerne conto.

Se vuoi che le tue pagine appaiano uguali su tutti i dispositivi e browser hai bisogno di tutti i formati sopra indicati.

Come usare correttamente Font Face?

Ecco la parte complicata, perché se cerchi su Google anche i migliori siti web non ti mostreranno la dura realtà.

Come menzionato sopra, ogni browser ha il proprio supporto per i font, e se vuoi che il tuo font funzioni su ogni browser devi caricare i tipi di font necessari e regolare il CSS di conseguenza.

Ad esempio se controlliamo Mozilla , noterai quanto segue:

1@font-face {
2font-family: "Open Sans";
3src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

È sufficiente? No, non funzionerà su tutti i browser. Ad esempio non funzionerà affatto su Internet Explorer.

Puoi controllare https://caniuse.com/?search=woff2 e vedere di persona.

Un altro esempio, se controlliamo W3 Schools :

1@font-face {
2font-family: myFirstFont;
3src: url(myFirstFont.woff);
4}

È corretto? Ancora no, non supporterà tutti i browser.

Per supportare tutti i browser i tuoi tipi di font caricati e il CSS dovrebbero apparire così:

 1@font-face {
 2font-family: 'FONT';
 3src: url('FONT.eot'); /_ IE9 Compat Modes _/
 4src: local(''),
 5url('FONT.eot?#iefix') format('embedded-opentype'), /_ IE6-IE8 _/
 6url('FONT.woff2') format('woff2'), /_ Super Modern Browsers _/
 7url('FONT.woff') format('woff'), /_ Modern Browsers _/
 8url('FONT.ttf') format('truetype'), /_ Safari, Android, iOS _/
 9url('FONT.svg#FONT') format('svg'); /_ Legacy iOS _/
10}

Nota i commenti su ogni tipo di font, è autoesplicativo. Questo supporterà tutti i browser e il font verrà visualizzato correttamente.

Come convertire e generare i tipi Font Face?

Se stai sviluppando un sito web per un cliente, di solito ti daranno un tipo di font. Questo sarà solo in formato .otf o .ttf, che non è sufficiente.

Hai bisogno di tutti i formati richiesti per tutti i browser, quindi dovrai convertirli nei tipi @font-face appropriati.

Fortunatamente abbiamo strumenti online che lo fanno automaticamente e generano persino il CSS corretto (ci siamo evoluti o no).

Convertire font a pagamento/personalizzati

Ti consiglio di usare Transfonter , ma puoi ovviamente usare quello che preferisci.

Questo strumento online gratuito convertirà il tuo font e ti fornirà tipi di font e CSS pronti all’uso:

 1@font-face {
 2font-family: 'Sample';
 3src: url('Sample.eot');
 4src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5url('Sample.woff2') format('woff2'),
 6url('Sample.woff') format('woff'),
 7url('Sample.ttf') format('truetype'),
 8url('Sample.svg#Sample') format('svg');
 9font-weight: normal;
10font-style: normal;
11}

Convertire font gratuiti/open source

In un altro scenario in cui il cliente non ti fornirà un font a pagamento ma un Google Font gratuito, c’è uno strumento anche per questo: https://google-webfonts-helper.herokuapp.com/fonts .

Questo strumento genererà anche i tipi e il CSS necessari per visualizzare correttamente i font su tutti i browser.

Ti consiglio vivamente di ispezionare i font risultanti in diversi browser.

Come usare correttamente le Font Family?

Posso scommettere tranquillamente che non hai mai usato la specifica font family in modo ottimale. Caricare il font face corretto non è sufficiente, devi anche specificare font di fallback.

I font di fallback vengono utilizzati quando il font corrente non è disponibile. Questo può accadere per diversi motivi, da un problema CDN a un timeout di rete.

Noterai che la maggior parte dei CMS hanno definito font di fallback come i seguenti:

1html {
2font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

È sufficiente? No. Purtroppo i font di sistema non sono gli stessi su ogni dispositivo. Windows ha i suoi, Android ha i suoi, iOS anche e così via.

Quindi cosa fare? Dichiararli correttamente, guarda come fa Bootstrap :

 1// Safari for OS X and iOS (San Francisco)
 2-apple-system,
 3// Chrome < 56 for OS X (San Francisco)
 4BlinkMacSystemFont,
 5// Windows
 6"Segoe UI",
 7// Android
 8"Roboto",
 9// Basic web fallback
10"Helvetica Neue", Arial, sans-serif,
11// Emoji fonts
12"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Usando quanto sopra con font personalizzati il risultato sarebbe:

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Questo è un modo elegante di gestire i font di fallback, assicurando che il tuo sito apparirà bene su tutti i dispositivi mentre i font si caricano (o non si caricano affatto).

Testare Font Face e Font Family

Non spaventarti dalla parola testing, questo è un processo molto semplice se lavori in modo intelligente. Non hai nemmeno bisogno di ispezionare la pagina manualmente per vedere quale font è stato caricato (se sei pigro).

Con l’evoluzione della tecnologia, si evolvono anche gli strumenti disponibili per gli sviluppatori; rendendo sempre più facile creare cose.

Verificare se il tuo @font-face e font-family si caricano correttamente è un processo molto semplice, vedi sotto.

Controllare Font Face e Font Family

  1. Usa un’estensione del browser per vedere facilmente quale font sta usando il tuo sito:
  1. Modifica la tua pagina e “rompi” il @font-face, simulando un caso in cui il font personalizzato non si carica. Puoi “rompere” il caricamento alterando il nome del font o l’URL che porta a un font inesistente.
  2. Il risultato dovrebbe essere il primo font che corrisponde al tuo dispositivo come fallback. Ad esempio su un dispositivo Apple, dovrebbe essere “-apple-system”.

Suggerimenti e trucchi

  • Usa il tag HTML link header “preconnect” se stai caricando font da un CDN.
  • In ogni dichiarazione di font, aggiungi font-display: swap; per velocizzare il caricamento. Questo istruisce il browser a usare il font di fallback per visualizzare il testo finché il font personalizzato non è completamente scaricato.
  • Carica solo i font che sono effettivamente necessari, ho visto persone caricare 7 tipi di font dello stesso font ma usarne solo uno.
  • Per migliorare la velocità della pagina, precarica il (primo o necessario) font usando HTTP/2. Questo velocizzerà considerevolmente la tua pagina e risolverà il problema Google PageSpeed “Ensure text remains visible during webfont load”.

Bene, questo è tutto, spero che questo articolo ti sia stato utile.