Come utilizzare l'API CSS di Google Fonts per pubblicare in modo efficiente caratteri web.
Nel corso degli anni, molto è cambiato con la tecnologia dei caratteri web. Quella che prima era una pratica di nicchia che richiedeva un'immagine di testo o un plug-in Flash (e che comprometteva l'ottimizzazione per i motori di ricerca del tuo sito web) ora è una pratica standard sul web. C'era una volta che era necessario caricare un intero font prima che la pagina venisse caricata, con stili e caratteri che forse non avevi nemmeno usato, ma anche questo è passato al passato.
Anche l'API CSS di Google Fonts si è evoluta negli anni per stare al passo con i cambiamenti nella tecnologia dei caratteri web. Ha fatto molta strada dalla sua proposta di valore originale, per rendere il Web più veloce consentendo al browser di memorizzare nella cache i caratteri di uso comune in tutti i siti web che utilizzavano l'API. Questo non è più vero, ma l'API fornisce comunque ulteriori e importanti ottimizzazioni in modo che i siti web si carichino rapidamente e i caratteri funzionino bene.
Utilizzando l'API CSS di Google Fonts, il tuo sito web può richiedere solo i dati dei caratteri necessari per mantenere al minimo il tempo di caricamento CSS, garantendo che i visitatori del tuo sito web possano caricare i tuoi contenuti il più rapidamente possibile. L'API risponderà a ogni richiesta con il carattere migliore per il browser web specifico.
Tutto questo avviene includendo una singola riga di codice HTML nel tuo codice.
Come utilizzare l'API CSS di Google Fonts
La documentazione relativa all'API CSS di Google Fonts riassume bene:
Non è necessaria alcuna programmazione; non devi fare altro che aggiungere uno speciale link del foglio di stile al tuo documento HTML, quindi fare riferimento al carattere in uno stile CSS.
Non devi fare altro che includere una singola riga nel codice HTML, in questo modo:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Quando richiedi un carattere all'API, specifichi la famiglia o le famiglie che preferisci e, facoltativamente, le ponderazioni, gli stili, i sottoinsiemi e molte altre opzioni. L'API gestirà quindi la tua richiesta in uno dei due modi seguenti:
- Se la richiesta utilizza parametri comuni per i quali l'API dispone già di file, restituirà immediatamente CSS all'utente, indirizzandolo a questi file.
- Se hai richiesto un carattere con parametri che l'API non ha al momento memorizzato nella cache, creerà un sottoinsieme dei caratteri in tempo reale, utilizzando HarfBuzz per eseguire rapidamente questa operazione e restituirà il codice CSS che vi rimanda.
I file dei caratteri possono essere grandi, ma non è necessario
I caratteri web possono essere grandi, è vero. Un singolo peso di Noto Sans Japan in WOFF2 equivale a quasi 3,4 MB e il download di questo risultato per ciascuno dei tuoi utenti comporterebbe una riduzione del tempo di caricamento della pagina. Quando ogni millisecondo conta e ogni byte è prezioso, assicurati di caricare solo i dati di cui gli utenti hanno bisogno.
L'API CSS di Google Fonts può creare file di caratteri molto piccoli (chiamati sottoinsiemi), generati in tempo reale, per mostrare agli utenti solo il testo e gli stili richiesti dal tuo sito web. Anziché pubblicare un intero carattere, puoi richiedere caratteri specifici utilizzando il parametro text.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
L'API CSS fornisce inoltre ulteriori ottimizzazioni dei caratteri web agli utenti, senza bisogno di parametri API. L'API pubblicherà i file CSS degli utenti con unicode-range già attivato (se supportato dal loro browser web), in modo che vengano caricati solo per i caratteri specifici necessari per il tuo sito web.
Il descrittore CSS Unicode è uno strumento che ora può essere utilizzato per contrastare i download di caratteri di grandi dimensioni. Questa proprietà CSS imposta un intervallo di caratteri Unicode contenuti nella dichiarazione @font-face. Se viene visualizzato uno di questi caratteri nella pagina, viene scaricato quel carattere. Questo approccio funziona bene per tutti i tipi di lingue, quindi puoi prendere un carattere che include caratteri latini, greci o cirillici e creare sottoinsiemi più piccoli. Nel grafico precedente, puoi vedere che se dovessi caricare tutti e tre questi set di caratteri, la quantità di glifi sarà superiore a 600.
In questo modo si attivano anche i caratteri cinesi, giapponesi e coreani (CJK) per il web. Nel grafico precedente, puoi vedere che un carattere CJK copre 15-20 volte il numero di caratteri di un carattere latino. Questi caratteri sono in genere molto grandi e molti dei caratteri di queste lingue non vengono utilizzati con la stessa frequenza degli altri.
L'utilizzo dell'API CSS e dell'intervallo Unicode può ridurre i trasferimenti di file di circa il 90%. Con il descrittore unicode-range puoi definire ogni parte separatamente e ogni sezione viene scaricata solo dopo che i contenuti contengono uno dei caratteri inclusi in questi intervalli di caratteri.
Ad esempio: se vuoi impostare solo la parola "seguiんたちた" in Noto Sans JP:
- Ospita autonomamente i tuoi file WOFF2.
- Utilizza l'API CSS per recuperare WOFF2.
- Utilizza l'API CSS con il parametro text= impostato su "グんたちち".
In questo esempio, si può vedere che utilizzando l'API CSS si sta già risparmiando il 97,5% rispetto all'hosting autonomo del font WOFF2, grazie al supporto integrato dell'API per la separazione dei caratteri di grandi dimensioni in un intervallo Unicode. Facendo un passo in più e specificando esattamente il testo che vuoi visualizzare, puoi ridurre ulteriormente le dimensioni del carattere fino al 95,3% del carattere dell'API CSS, ossia il 99,9% più piccolo del carattere self-hosted.
L'API CSS di Google Fonts invia automaticamente i caratteri nel formato più piccolo e più compatibile supportato dal browser dell'utente. Se l'utente utilizza un browser con supporto WOFF2, l'API fornirà i caratteri in WOFF2, ma se utilizza un browser meno recente, l'API fornirà i caratteri in un formato supportato da quel browser. Per ridurre le dimensioni del file per ogni utente, l'API rimuove anche i dati dai caratteri quando non sono necessari. Ad esempio, i dati di suggerimento verranno rimossi per gli utenti i cui browser non ne hanno bisogno.
Rendi i tuoi caratteri web a prova di futuro con l'API CSS di Google Fonts
Il team di Google Fonts contribuisce anche ai nuovi standard W3C che continuano a innovare le tecnologie per i caratteri web, come WOFF2. Un progetto attuale è il trasferimento incrementale dei caratteri, che consente agli utenti di caricare parti molto piccole di file dei caratteri quando vengono utilizzati sullo schermo e trasmettere in streaming il resto on demand, superando le prestazioni di un intervallo Unicode. Quando utilizzi la nostra API dei caratteri web, i tuoi utenti beneficiano dei miglioramenti sottostanti della tecnologia di trasferimento dei caratteri non appena diventano disponibili nel loro browser.
Questo è il grande vantaggio di un'API Font: i tuoi utenti beneficiano di ogni nuovo miglioramento tecnologico senza alcuna modifica al tuo sito web. Nuovo formato di carattere web? Nessun problema. Supporto di nuovi browser o sistemi operativi? È stata curata. Quindi, anziché impantanarti nella manutenzione dei tuoi caratteri web, puoi concentrarti liberamente sui tuoi utenti e sui tuoi contenuti.
Supporto integrato per i caratteri variabili
I caratteri variabili sono file di caratteri in grado di memorizzare una serie di variazioni di design tra più assi e la nuova versione dell'API CSS di Google Fonts include il supporto di questi caratteri. L'aggiunta di un ulteriore asse di variazione consente una nuova flessibilità con un carattere, ma le dimensioni del file del carattere possono essere quasi raddoppiate.
Quando la tua richiesta API CSS è più specifica, l'API CSS di Google Fonts può pubblicare solo la porzione del carattere variabile necessaria per il tuo sito web, in modo da ridurre le dimensioni di download per gli utenti. Ciò consente di utilizzare caratteri variabili per il web senza comportare lunghi tempi di caricamento delle pagine. Puoi farlo specificando un singolo valore su un asse o un intervallo; puoi anche specificare più assi e più famiglie di caratteri in una sola richiesta. L'API è flessibile per soddisfare le tue esigenze.
Semplici da implementare, ottimizzati per te
L'API CSS di Google Fonts ti aiuta a caricare caratteri che sono:
- Maggiore compatibilità con i browser web.
- Il più piccolo possibile.
- Consegnato rapidamente.
- Più facile da utilizzare.
Per saperne di più su Google Fonts, visita il sito fonts.google.com. Per saperne di più sull'API CSS, consulta la documentazione API.
Ringraziamenti
Immagine hero di leesehee.