0Pricing
CSS Academy · Lezione

Google Fonts e @font-face

Caricate font esterni da Google Fonts o definite font personalizzati utilizzando la regola @font-face.

Google Fonts e @font-face è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Perché usare font personalizzati?

I font sicuri per il Web offrono solo una scelta limitata. I font personalizzati consentono di riprodurre con precisione l'identità del marchio. I due approcci principali sono Google Fonts (servizio in hosting) e @font-face (self-hosting).

Configurazione di Google Fonts

Visiti fonts.google.com, selezioni una famiglia di font, scelga gli spessori e copi il tag <link> nell'elemento HTML <head>:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Usare Google Fonts in CSS

Dopo aver aggiunto il collegamento, faccia riferimento al font tramite il nome nella dichiarazione font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parametri dell'API di Google Fonts

Il parametro display=swap utilizza la strategia Font Display Swap: il testo viene visualizzato immediatamente con il font di fallback e poi sostituito quando il font personalizzato viene caricato. In questo modo si evita che il testo rimanga invisibile durante il caricamento.

Nozioni di base su @font-face

@font-face consente di caricare un file di font personalizzato ospitato autonomamente. Definisca il nome della famiglia di font e l'origine del file:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: il formato moderno

WOFF2 (Web Open Font Format 2) è il formato consigliato. Offre la migliore compressione (in genere è il 30% più piccolo di WOFF) ed è supportato da tutti i browser moderni. Includa sempre WOFF come fallback.

Più spessori con @font-face

Dichiari un blocco @font-face per ogni combinazione di spessore e stile. Utilizzi lo stesso nome font-family, così il browser selezionerà automaticamente il file corretto:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Proprietà font-display

Il descrittore font-display controlla il comportamento durante il caricamento del font:

  • swap — mostra subito il fallback e lo sostituisce quando il font è pronto (consigliato)
  • block — testo invisibile per un massimo di 3 secondi
  • fallback — breve periodo di blocco, poi fallback permanente
  • optional — usa il font solo se è già nella cache
<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face per font variabili

I font variabili definiscono intervalli di valori per gli assi invece di valori fissi per lo spessore:

<p class="variable-text">Variable weight text (550)</p>

Precaricamento dei font essenziali

Precarichi il file del font più importante per ridurre il ritardo dovuto al blocco del rendering. Aggiunga un elemento <link rel="preload"> prima del foglio di stile:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() per evitare il download

Utilizzi local() in src per verificare se l'utente ha già installato il font prima di scaricarlo:

<p class="roboto-text">Uses local Roboto if installed</p>

Verifica rapida

Quale formato di font offre la migliore compressione e il supporto più ampio nei browser moderni?

Riepilogo

Google Fonts offre font in hosting facili da usare tramite un tag <link>. Ospiti autonomamente i font con @font-face, utilizzando il formato WOFF2 e font-display: swap per ottenere prestazioni ottimali. Precarichi i font essenziali e utilizzi local() per evitare download non necessari.

Domande Frequenti

La lezione «Google Fonts e @font-face» è gratuita?

Sì — il testo completo di «Google Fonts e @font-face» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Google Fonts e @font-face»?

Caricate font esterni da Google Fonts o definite font personalizzati utilizzando la regola @font-face. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Google Fonts e @font-face»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Famiglie di caratteri e font web-safe
  2. Dimensione, peso e stile del carattere
  3. Allineamento, decorazione e spaziatura del testo
  4. Google Fonts e @font-face
← Torna a CSS Academy