Caricamento font con @font-face: src, format, font-display

Molti siti importano font da servizi esterni come Google Fonts. In diversi progetti, però, può essere preferibile ospitare i font localmente: hai più controllo su privacy, cache, disponibilità dei file e comportamento di caricamento.

Per farlo, dobbiamo dire al CSS dove si trovano i file del font scaricati, usando la regola @font-face.

1. I formati dei Font: dimentica i TTF

Quando scarichi un font, potresti trovare file in formato .ttf o .otf. Possono funzionare, ma spesso non sono la scelta più efficiente per il web.

Per i siti web moderni, il formato più consigliato è WOFF2 (Web Open Font Format 2), perché è compresso e supportato dai browser moderni. Se devi supportare browser molto vecchi, puoi prevedere anche fallback, ma per un progetto nuovo WOFF2 è la base corretta.

2. Dichiarare il Font nel CSS

Metti i tuoi file .woff2 nella cartella degli asset del tuo progetto (es. public/fonts/). Poi, in cima al tuo file CSS, scrivi la regola @font-face.

@font-face {
  /* 1. Inventa un nome che userai poi in font-family */
  font-family: 'IlMioFontPersonalizzato';
  
  /* 2. Dici al browser dove trovare il file woff2 */
  src: url('/fonts/MioFont-Regular.woff2') format('woff2');
  
  /* 3. Dichiariamo che questo file specifico è il peso Normale (400) */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Se vuoi usare anche il grassetto di quel font, non basta scrivere font-weight: bold sul testo: devi dichiarare una SECONDA @font-face che punta al file del font in versione Bold.

@font-face {
  /* IL NOME DEVE ESSERE UGUALE! */
  font-family: 'IlMioFontPersonalizzato';
  
  /* Ma il file è diverso! */
  src: url('/fonts/MioFont-Bold.woff2') format('woff2');
  
  /* E dichiariamo che questo file è il grassetto (700) */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

3. Applicare il font

Ora che il CSS ha “scaricato” e registrato la famiglia nella sua memoria, puoi usarla normalmente dove preferisci:

body {
  font-family: 'IlMioFontPersonalizzato', sans-serif;
  font-weight: 400; /* Il browser caricherà il file MioFont-Regular.woff2 */
}

h1 {
  font-family: 'IlMioFontPersonalizzato', sans-serif;
  font-weight: 700; /* Il browser caricherà il file MioFont-Bold.woff2 */
}

Perché font-display: swap

font-display: swap permette al browser di mostrare subito un font di sistema e sostituirlo con il font personalizzato appena disponibile. In questo modo eviti che il testo resti invisibile durante il download del font.

Ospitare i font localmente non rende automaticamente un sito più veloce o conforme a ogni normativa: dipende da peso dei file, cache, configurazione server e contesto legale. Ti offre però più controllo, ed è un’ottima scelta per un progetto che vuoi comprendere fino in fondo.