Guida rapida alle API dei caratteri Web
Guida rapida alle API dei caratteri Web
Cos’è un’API font?
| Servizio Web Font | Libreria ospitata (ad esempio, GoogleFonts, AdobeFonts) 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 | Sintassi 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 programmatici 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 sottoinsieme. |
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. |
Utilizzando il 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.
Googlefonts CSSAPI (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 OpenSans. |
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 (Googlefonts)
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'));AdobeFonts (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 Googlefonts
- 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 richiedeva solo glifi: utilizza il parametro “unicode-range” o “text=” 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-display” almeno su “swap”.
Evita di “bloccare” il rendering del testo, il che danneggia CLS (Cumulative Layout Shift).Combina famiglie in un’unica richiesta quando utilizzi GoogleFonts o AdobeFonts.
Cache per sempre: la maggior parte dei CDN invia intestazioni “Cache‑Control” del futuro lontano 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 |
| API CSS di Google Fonts | <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 UX. ✅ 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 integrato 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!