CSS @font-face

@font-face è la regola CSS at-rule che indica al browser dove trovare un file di font e come chiamarlo. Era supportata per la prima volta in IE 4 nel 1997, ma è diventata pratica su tutti i browser intorno al 2010, quando è arrivato WOFF e gli altri browser hanno implementato la regola in modo coerente.

Per i font icona, @font-face è il collegamento tra i file di font e le classi CSS che visualizzano le icone. Senza di essa, il browser non ha modo di sapere che font-family: 'MyIcons' deve caricare un file specifico dal server.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Il descrittore font-family assegna un nome al font che verrà referenziato in seguito. Il descrittore src indica al browser dove scaricare il file e in quale formato si trova. I descrittori font-weight e font-style garantiscono che il browser non tenti di sintetizzare varianti in grassetto o corsivo. E font-display controlla cosa accade durante il caricamento del font.

Il suggerimento format() dopo ogni URL indica al browser in quale formato si trova il file, in modo che possa saltare i formati non supportati senza scaricarli prima. Nel corso degli anni, il set di formati consigliato si è notevolmente ridotto con il miglioramento del supporto browser.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Con una copertura browser superiore al 97%, solo WOFF2 è sufficiente per la stragrande maggioranza dei progetti moderni. Questo è l'approccio più semplice e performante.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

Aggiungere WOFF come fallback copre IE 11, che non supporta WOFF2. I browser moderni scaricheranno il file WOFF2; IE 11 ricorrerà a WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

Lo stack "bulletproof" completo include EOT per IE 6-8, WOFF2 per i browser moderni, WOFF per IE 9-11 e TTF come fallback finale. Il browser prova ogni voce src in ordine e utilizza il primo formato che comprende. Questo approccio è necessario solo per i progetti con requisiti legacy estremi.

Il pattern standard per i font icona utilizza una classe base che imposta la famiglia di font e gli stili di rendering condivisi, quindi classi icona individuali che utilizzano pseudo-elementi ::before con content impostato al punto di codice Unicode di ciascuna icona.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

La classe base reimposta lo stile del font per impedire al browser di applicare grassetto, corsivo o altre trasformazioni che distorcerebbero le icone. Le proprietà -webkit-font-smoothing e -moz-osx-font-smoothing abilitano l'antialiasing per un rendering più nitido su macOS e iOS.

Ogni classe icona imposta un pseudo-elemento ::before con il punto di codice Unicode assegnato a quel glifo. La notazione con backslash-E (\E001) è il modo di CSS per referenziare un carattere Unicode tramite il suo punto di codice esadecimale.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Sia <i> che <span> funzionano ugualmente bene. L'elemento stesso è vuoto — l'icona viene renderizzata interamente dal pseudo-elemento ::before.

Il descrittore font-display controlla cosa mostra il browser mentre il file di font è ancora in fase di download. Questo è fondamentale per i font icona poiché l'impostazione sbagliata può rendere le icone invisibili durante il caricamento della pagina.

Per i font icona, swap è la scelta consigliata. Un breve flash di contenuto non stilizzato (dove i punti di codice delle icone potrebbero apparire come quadrati o spazi vuoti) è di gran lunga preferibile alle icone invisibili. Con block, gli utenti potrebbero vedere uno spazio vuoto dove dovrebbero essere le icone per fino a 3 secondi su connessioni lente — il che sembra una pagina rotta. Con swap, le icone appaiono non appena il font si carica, e la transizione è di solito impercettibile su connessioni moderne.

I file di font sono di default bloccanti per il rendering — il browser non visualizzerà il testo con un font personalizzato fino a quando il file non è stato scaricato. Ecco le tecniche per minimizzare l'impatto:

• Precaricare il file di font — usare <link rel="preload"> per avviare il download del font il prima possibile, prima ancora che il browser analizzi il CSS che lo referenzia.
• Ospitare i font in locale — servire i file di font dalla stessa origine dell'HTML evita lookup DNS extra e la configurazione della connessione, ed elimina i problemi di CORS.
• Eseguire il subsetting del font — rimuovere le icone non utilizzate per ridurre le dimensioni del file. Un font con 500 icone in cui se ne usano solo 50 sta sprecando il 90% del download.
• Usare unicode-range — se si dispone di più set di icone, questo descrittore indica al browser di scaricare il file di font solo quando i caratteri nell'intervallo specificato vengono effettivamente utilizzati nella pagina.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

L'attributo crossorigin è necessario anche per i font della stessa origine — questa è una peculiarità della specifica di caricamento dei font. Senza di esso, il browser scaricherà il font due volte: una volta dall'hint di precaricamento (senza CORS) e una volta dalla regola @font-face (con CORS).

• Errori CORS — I file di font serviti da un'origine diversa (ad es., un sottodominio CDN) necessitano di header Access-Control-Allow-Origin sul server. In alternativa, usare l'attributo crossorigin sul tag <link>. Senza una corretta configurazione CORS, il browser bloccherà silenziosamente il font.
• Icone visualizzate come quadrati o rettangoli — Di solito significa che il percorso del file di font è sbagliato, che il font non è ancora stato caricato o che il nome font-family nella classe icona non corrisponde al nome nella dichiarazione @font-face. Controllare la scheda Rete del browser per confermare che il file di font è stato caricato con status 200.
• Icone che mostrano glifi errati — Conflitti di punti di codice Unicode con i font di sistema. Se il font icona usa punti di codice in intervalli che si sovrappongono ai font di sistema comuni, il browser potrebbe renderizzare un carattere di sistema invece dell'icona. I font icona tipicamente usano l'Area ad Uso Privato (da U+E000 a U+F8FF) per evitare questo problema.