Guida rapida alle API dei caratteri Web
Guida rapida alle API dei caratteri Web
Cos’è un’API font?
| Concetto | Descrizione |
|---|---|
| Servizio Web Font | Libreria ospitata (ad esempio, Google Fonts, Adobe Fonts) che fornisce CSS <link> o frammenti JavaScript per recuperare i file di font da una CDN. |
| CSS @font-face | API di basso livello del browser che indica allo user agent dove scaricare un file di font e quale nome di famiglia esporre al CSS. |
| API Variable-font | Sintaxi più recente (font-variation-settings, intervalli degli assi) che consente a un singolo file di esporre più stili (spessore, larghezza, inclinazione, ecc.). |
| Descrittore di visualizzazione font | Controlla come viene visualizzato il testo durante il caricamento del font (auto, block, swap, fallback, optional). |
| Aiuti di caricamento JavaScript | Helper opzionali (costruttore FontFace, document.fonts.load()) per il caricamento o il precaricamento al volo dei font. |
Tutti questi appartengono alla famiglia “Font API” perché espongono modi programmativi per richiedere e utilizzare i caratteri.
Terminologia CSS fondamentale
| Proprietà / parola chiave | Significato |
|---|---|
font-family | Il nome che usi in CSS dopo il caricamento del font. |
src | URL dei file del font effettivi (.woff2, .woff, .ttf, …). |
unicode-range | Sottoinsieme di caratteri inclusi in un dato file – ottimo per il subsetting. |
font-weight / font-style / font-stretch | Descrittori statici classici. |
font-variation-settings | Coppie chiave/valore per gli assi delle variabili ('wght' 400). |
font-display | Strategia di fallback per il rendering durante il caricamento del font. |
Utilizzo del CSS @font-face integrato (self-hosted)
1<!-- 1️⃣ Put the font files on your server (or CDN) -->
2<link rel="preload" href="/fonts/Inter-Variable.woff2"
3 as="font" type="font/woff2" crossorigin>
4
5<style>
6 /* 2️⃣ Declare the family */
7 @font-face {
8 font-family: 'Inter Variable';
9 src: url('/fonts/Inter-Variable.woff2') format('woff2');
10 /* Optional – load only Latin characters */
11 unicode-range: U+0000-00FF;
12 /* Show fallback text until the font is ready */
13 font-display: swap;
14 }
15
16 /* 3️⃣ Use it */
17 body {
18 font-family: 'Inter Variable', system-ui, sans-serif;
19 }
20</style>Vantaggi: controllo completo su memorizzazione nella cache, licenze e sottoinsiemi; funziona offline se raggruppi i file.
Google Fonts CSS API (l’API di caratteri pubblici più comune)
1<link href="https://fonts.googleapis.com/css2?
2family=Roboto:wght@400;700&
3family=Open+Sans:ital,wght@0,400;0,600;1,400&
4display=swap"
5rel="stylesheet">Spiegazione
| Parte | Cosa fa |
|---|---|
family=Roboto:wght@400;700 | Richiede solo i pesi normale e grassetto di Roboto. |
family=Open+Sans:ital,wght@0,400;0,600;1,400 | Carica Roman normale/semigrassetto + corsivo normale di Open Sans. |
display=swap | Utilizza il testo di riserva fino al completamento del caricamento dei font (consigliato per l’esperienza utente). |
Quindi nei CSS:
1h1 { font-family: 'Roboto', sans-serif; }
2p { font-family: 'Open Sans', sans-serif; }Suggerimenti
- Combina più famiglie in un’unica richiesta: riduce i viaggi di andata e ritorno HTTP.
- Utilizza intervalli di assi per i caratteri variabili:
family=Inter:wght@200..800.
Esempio di carattere variabile (Google Fonts)
1<link href="https://fonts.googleapis.com/css2?
2family=Inter:wght@200..800&display=swap"
3rel="stylesheet">
4
5<style>
6 .hero {
7 font-family: 'Inter', system-ui;
8 /* Animate weight from thin → bold */
9 font-variation-settings: 'wght' 200;
10 transition: font-variation-settings .6s ease;
11 }
12 .hero:hover { font-variation-settings: 'wght' 800; }
13</style>Perché è importante: un file sostituisce dozzine di .woff2 statici → carico utile notevolmente più piccolo.
API di caricamento dei caratteri JavaScript (FontFace)
Quando utilizzarlo – è necessario caricare un font dopo il caricamento della pagina (ad esempio, nel routing SPA) o si desidera attendere che sia pronto prima di mostrare l’interfaccia utente.
1// Create a FontFace object
2const myFont = new FontFace(
3 'Custom Serif',
4 'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
5 { weight: '400 900', style: 'normal' } // optional descriptors
6);
7
8// Add it to the document’s FontFaceSet
9document.fonts.add(myFont);
10
11// Start loading
12myFont.load().then(() => {
13 // Font ready → apply it
14 document.body.style.fontFamily = '"Custom Serif", serif';
15}).catch(err => console.error('Font failed', err));Puoi anche interrogare quali caratteri sono caricati:
1document.fonts.ready.then(() => console.log('All fonts ready'));Adobe Fonts (Typekit) – un’altra API di caratteri pubblici
1<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">Quindi fare riferimento alle famiglie esattamente come elencate nel kit:
1h2 { font-family: "adobe-caslon-pro", serif; }Differenze chiave rispetto ai Google Fonts
- Richiede un account Adobe e un ID del kit di incorporamento (
xyz123). - Fornisce le opzioni di caricamento sync e async (
<script>… Typekit.load(); </script>).
Migliori pratiche per le prestazioni
Il sottoinsieme richiede solo i glifi necessari: utilizza il parametro
unicode-rangeotext=di Google Fonts.Sfrutta il
preloadper i font critici:
1<link rel="preload" href="/fonts/Inter-Variable.woff2"
2 as="font" type="font/woff2" crossorigin>Imposta
font-displayalmeno suswap. Evita di “bloccare” il rendering del testo, il che danneggia il punteggio CLS (Cumulative Layout Shift).Combina famiglie in un’unica richiesta quando utilizzi Google Fonts o Adobe Fonts.
Cache permanente: la maggior parte dei CDN invia intestazioni
Cache-Controlcon una scadenza lontana nel tempo per i file woff2.
Foglio informativo di riferimento rapido
| API | Come richiederlo | Caso d’uso tipico |
|---|---|---|
| CSS @font-face | <style>@font-face{…}</style> + <link rel="preload"> opzionale | Font self-hosted, controllo completo |
| Google Fonts CSS API | <link href="https://fonts.googleapis.com/css2?..."> | Font gratuiti con semplici parametri URL |
| Adobe Fonts (Typekit) | <link href="https://use.typekit.net/xxxx.css"> | Libreria a pagamento con integrazione con il design system |
| API JS di FontFace | new FontFace(name, src[, descriptors]) | Caricamento dinamico in SPA/bundle runtime |
| Intervallo asse variabile font | family=Inter:wght@200..800 o CSS font-variation-settings | Riduci il numero di file e abilita transizioni di peso fluide |
Esempio di codice TL;DR: una riga per la maggior parte dei progetti
1<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
2 rel="stylesheet">
3<style>
4 body {font-family:'Montserrat',Arial,sans-serif;}
5</style>✅ Carica solo caratteri normali e grassetti → download ridotto. ✅
display=swapgarantisce un testo di fallback veloce → buona esperienza utente. ✅ Funziona su tutti i browser moderni senza JavaScript aggiuntivo.
Che ne dici di Aspose?
Se è necessario manipolare o convertire file di caratteri sul lato server (ad esempio, generare sottoinsiemi, convertire tra TTF/WOFF2 o estrarre metriche di glifi), la libreria Aspose.Font fornisce un’API programmatica per .NET, Java e Python. Può essere integrata in pipeline di creazione o servizi back-end per preparare le risorse dei caratteri prima che vengano fornite tramite una qualsiasi delle API dei caratteri sopra descritte.
Pronto per l’incorporamento?
Copia uno qualsiasi degli snippet qui sopra nel tuo HTML/CSS/JS e avrai un’integrazione API Font pronta per la produzione in pochi secondi. Buon stile!