Regola CSS @font-face

La regola CSS @font-face consente di caricare un font personalizzato da un file che ospiti (o da un servizio web) e di utilizzarlo in qualsiasi punto del foglio di stile. Questo significa che non sei più limitato alla manciata di font "web-safe" che si trovano installati sul computer di ogni visitatore.

Questa pagina illustra i formati di font che puoi servire, come scrivere una dichiarazione @font-face robusta con fallback, la proprietà font-display che controlla il comportamento di caricamento, i descrittori di font disponibili e l'alternativa di utilizzare un servizio ospitato come Google Fonts.

Come funziona @font-face

Una regola @font-face esegue due operazioni:

Definisce un nome per il font tramite il descrittore font-family (ad esempio, myFirstFont).
Punta a uno o più file font tramite il descrittore src.

Una volta dichiarato, si fa riferimento al font con quel nome in qualsiasi regola font-family normale, esattamente come si farebbe con un font di sistema:

@font-face {
  font-family: 'myFirstFont';
  src: url('myfirstfont.woff2') format('woff2');
}

p {
  font-family: 'myFirstFont', sans-serif;
}

Termina sempre lo stack font-family con un fallback generico (come sans-serif) in modo che il testo rimanga leggibile se il file font non riesce a caricarsi.

Formati di font

I browser supportano diversi formati di file font: ttf, otf, eot, svg, svgz, woff e woff2. Per il web moderno hai bisogno solo di WOFF2 (con WOFF come fallback per i browser più vecchi); il resto sono legacy.

OTF-TTF

WOFF è stato creato per fornire un'alternativa compressa e ottimizzata per il web ai font OpenType e TrueType, riducendo le dimensioni del file e i tempi di caricamento. Tuttavia, le funzionalità OpenType possono interessare molti designer (come le legature).

EOT

Il formato Embedded Open Type, creato da Microsoft (i pionieri originali di @font-face) oltre 15 anni fa, è l'unico formato che IE8 e versioni precedenti riconoscono quando si usa @font-face.

SVG/SVGZ

Scalable Vector Graphics (Font) è un formato di font vettoriale. Tuttavia, i font SVG sono stati deprecati e rimossi da tutti i browser moderni. Non è più consigliato per nuovi progetti. SVGZ è la versione compressa di SVG.

WOFF/WOFF2

Web Open Font Format, creato per l'uso sul web e sviluppato da Mozilla insieme ad altre organizzazioni, i font WOFF spesso si caricano più velocemente rispetto ad altri formati perché utilizzano una versione compressa della struttura usata dai font OpenType (OTF) e TrueType (TTF). WOFF2 è la nuova generazione di WOFF e offre una migliore compressione.

Quando si usano font personalizzati, occorre tener conto delle seguenti considerazioni:

La dimensione del file. Si consiglia di usare opzioni con versioni più leggere.
Le limitazioni del set di caratteri. È possibile limitare i set di font per caricare solo i font che vengono effettivamente utilizzati.
Font di sistema per schermi piccoli. Una delle soluzioni è di applicare il font personalizzato solo agli schermi più grandi tramite @media.

Sintassi

Sintassi della regola CSS @font-face

@font-face {
  font-properties
}

Esempio della regola @font-face:

Esempio della regola CSS @font-face con i formati EOT, TTF, SVG, WOFF e WOFF2

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Provalo tu stesso »

Controllo del caricamento con font-display

Mentre un font web viene scaricato, il browser deve decidere cosa mostrare. Il descrittore font-display controlla il compromesso tra un lampo di testo invisibile (FOIT) e un lampo di testo non stilizzato (FOUT):

auto — il comportamento predefinito del browser (di solito simile a block).
block — nasconde brevemente il testo (fino a circa 3s), poi mostra il font web. Causa FOIT.
swap — mostra subito il testo di fallback, poi sostituisce con il font web quando viene caricato. La scelta migliore per il testo del corpo perché il contenuto non è mai invisibile.
fallback — un breve periodo di blocco, poi fallback; il font web viene sostituito solo se arriva rapidamente.
optional — come fallback, ma il browser può saltare completamente il font web su connessioni lente.

swap è la scelta più comune ed è utilizzato in tutti gli esempi seguenti.

Supporto dei browser

Supporto browser più profondo possibile

Questo è il metodo con il supporto più ampio. Prima di qualsiasi stile, occorre aggiungere la regola @font-face al foglio di stile.

Regola @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

Poi viene usata per applicare stili agli elementi nel modo seguente:

Regola CSS @font-face

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Livello pratico di supporto browser

Poiché WOFF e WOFF2 sono comunemente utilizzati, possiamo usare quanto segue:

Regola CSS @font-face

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

Supporto browser super progressivo

Se si lavora con WOFF, ci si può aspettare che WOFF2 possa essere utilizzato ad un certo punto:

Regola CSS @font-face

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

Tecniche alternative

In alcune situazioni, può essere preferibile usare un font ospitato. Questo viene offerto da Google Fonts come mezzo per utilizzare i loro font. Nel codice seguente, @import viene usato per caricare un font da Google Fonts:

Regola CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Poi può essere usato per applicare stili agli elementi:

Regola CSS @font-face

body {
  font-family: 'Open Sans', sans-serif;
}

Un servizio ospitato può avere un vantaggio. Probabilmente includerà tutte le variazioni del file font garantendo una compatibilità cross-browser profonda, e non ci sarà bisogno di ospitare i file da soli.

Regola CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

Allo stesso modo, un foglio di stile può essere collegato allo stesso asset nell'<head> del documento HTML e non nel CSS.

HTML

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Poi, gli elementi possono essere stilizzati come con gli altri metodi:

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

Di nuovo, le regole @font-face vengono importate ma vengono aggiunte all'<head> HTML:

CSS

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Esempio della regola @font-face con Google Fonts:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Provalo tu stesso »

Valori

Descrittore font	Valori	Descrizione
font-family	name	Definisce il nome del font ed è obbligatorio.
src	URL	Definisce l'URL da cui verrà scaricato il font ed è obbligatorio.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Definisce come il font verrà allargato. Il valore predefinito è normal ed è opzionale.
font-style	normal italic oblique	Definisce come il font verrà stilizzato. Il valore predefinito è normal ed è opzionale.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Definisce il grassetto del font. Il valore predefinito è normal ed è opzionale.
unicode-range	unicode-range	Definisce l'intervallo di caratteri unicode supportati dal font. Il valore predefinito è U+0-10FFFF ed è opzionale.

Utilizzo di local() in src

All'interno di src è possibile elencare local('Font Name') prima delle voci url(). Il browser utilizzerà un font corrispondente già installato sul computer dell'utente e scaricherà il file solo se non ne trova uno, risparmiando banda:

@font-face {
  font-family: 'MyWebFont';
  src: local('My Web Font'),
       url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

Capitoli correlati

@import — importa un altro foglio di stile, incluso un CSS di font ospitato.
@media — carica font personalizzati in modo condizionale, ad esempio solo su schermi più grandi.
font-family, font-weight e font-style — applica il font che hai definito.

Esercitazione

Pratica

Qual è lo scopo della regola @font-face in CSS?

Specificare un font personalizzato nella pagina webCambiare il colore di sfondo di un sito webAggiungere un foglio di stile esterno a un documento HTMLIncorporare un font in una pagina webControllare il layout di una pagina web