Come utilizzare l'API CSS di Google Fonts per pubblicare in modo efficiente i caratteri web.
Nel corso degli anni, la tecnologia dei font web è cambiata molto. Quello che un tempo 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. Una volta dovevi caricare un intero carattere prima del caricamento della pagina, con stili e caratteri che potresti non aver nemmeno utilizzato, ma anche questo è diventato un ricordo del passato.
Anche l'API Google Fonts CSS si è evoluta nel corso degli anni per stare al passo con i cambiamenti nella tecnologia dei caratteri web. Ha fatto molta strada rispetto alla sua proposta di valore originale: rendere il web più veloce consentendo al browser di memorizzare nella cache i caratteri di uso comune su tutti i siti web che utilizzano l'API. Non è più vero, ma l'API fornisce comunque ottimizzazioni aggiuntive e importanti per il caricamento rapido dei siti web e il corretto funzionamento dei caratteri.
Utilizzando l'API CSS di Google Fonts, il tuo sito web può richiedere solo i dati dei caratteri necessari per ridurre al minimo il tempo di caricamento del CSS, in modo che i visitatori del tuo sito web possano caricare i contenuti il più rapidamente possibile. L'API risponderà a ogni richiesta con il carattere migliore per quel browser web.
Per farlo, devi includere una singola riga di codice HTML nel tuo codice.
Come utilizzare l'API CSS di Google Fonts
La documentazione dell'API CSS di Google Fonts riassume quanto segue:
Non è necessaria alcuna programmazione; devi solo aggiungere un link a un foglio di stile speciale al tuo documento HTML, quindi fare riferimento al carattere in uno stile CSS.
Il minimo che devi fare è includere una singola riga nel codice HTML, ad esempio:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Quando richiedi un carattere dall'API, specifichi la famiglia o le famiglie che ti interessano e, facoltativamente, i relativi spessori, stili, sottoinsiemi e molte altre opzioni. L'API gestirà quindi la richiesta in uno dei due modi seguenti:
- Se la richiesta utilizza parametri comuni per i quali l'API ha già file, restituirà immediatamente il CSS all'utente indirizzandolo a questi file.
- Se hai richiesto un font con parametri che al momento l'API non dispone di cache, eseguirà immediatamente un sottoinsieme dei tuoi caratteri utilizzando HarfBuzz per farlo rapidamente, quindi restituirà un codice CSS che rimanda a tali caratteri.
I file dei caratteri possono essere grandi, ma non è necessario che siano
È vero, i caratteri web possono essere di grandi dimensioni. Un solo peso di Noto Sans giapponese in WOFF2 è di quasi 3,4 MB e il download per ciascuno dei tuoi utenti sarebbe una limitazione del tempo di caricamento della pagina. Quando ogni millisecondo conta e ogni byte è prezioso, devi assicurarti 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. Invece di pubblicare un'intera famiglia di caratteri, 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 offre inoltre ulteriori ottimizzazioni automatiche dei caratteri web agli utenti, senza parametri API. L'API pubblicherà i file CSS degli utenti in cui unicode-range
è già attivato (se supportato dal browser web), quindi caricano i caratteri 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, il carattere viene scaricato. Questo formato funziona bene per tutti i tipi di lingue, quindi puoi scegliere 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, avresti più di 600 glifi.
In questo modo vengono attivati 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. Tali caratteri sono in genere molto grandi e molti dei caratteri delle lingue in questione non vengono utilizzati con la stessa frequenza degli altri.
L'utilizzo dell'API CSS e di Unicode può ridurre i trasferimenti di file di circa il 90%. Utilizzando il descrittore unicode-range
, puoi definire ogni porzione separatamente e ogni segmento viene scaricato solo quando i contenuti contengono uno dei caratteri di questi intervalli di caratteri.
Esempio: se vuoi impostare solo la parola "こんにちは" in Noto Sans JP, puoi:
- Ospitare i tuoi file WOFF2.
- Utilizza l'API CSS per recuperare il WOFF2.
- Utilizza l'API CSS con il parametro text= impostato su "すんちちち".".
In questo esempio, puoi vedere che utilizzando l’API CSS si risparmia già il 97,5% rispetto all’hosting autonomo del carattere WOFF2, grazie al supporto integrato dell’API per la separazione dei caratteri di grandi dimensioni in Unicode-range. Se fai un ulteriore passo avanti e specifichi esattamente il testo che vuoi visualizzare, puoi ridurre ulteriormente le dimensioni del carattere fino al 95,3% del carattere dell'API CSS, ovvero il 99,9% in meno rispetto al carattere auto-in hosting.
L'API CSS di Google Fonts pubblicherà automaticamente i caratteri nel formato più piccolo e 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 li fornirà in un formato supportato dal browser. Per ridurre le dimensioni del file per ciascun utente, l'API rimuove anche i dati dai caratteri quando non sono necessari. Ad esempio, i dati degli indicatori verranno rimossi per gli utenti i cui browser non ne hanno bisogno.
Preparare i caratteri web per il futuro con l'API CSS di Google Fonts
Inoltre, il team di Google Fonts contribuisce ai nuovi standard W3C che continuano a innovare le tecnologie per i caratteri web, come WOFF2. Un progetto attuale è il trasferimento dei caratteri incrementale, che consente agli utenti di caricare parti molto piccole di file dei caratteri quando vengono utilizzati sullo schermo e di trasmettere in streaming il resto on demand, superando le prestazioni dell'intervallo Unicode. Quando utilizzi la nostra API web fonts, i tuoi utenti ricevono questi miglioramenti alla tecnologia di trasferimento dei caratteri di base quando diventano disponibili nel browser.
Ecco la bellezza di un'API per i caratteri: i tuoi utenti possono usufruire di ogni nuovo miglioramento tecnologico senza apportare modifiche al tuo sito web. Nuovo formato dei caratteri web? Nessun problema. Supporto per un nuovo browser o sistema operativo? Ce ne sono occupati. In questo modo, invece di occuparti della manutenzione dei tuoi caratteri web, puoi concentrarti sui tuoi utenti e sui tuoi contenuti.
Supporto dei caratteri variabili integrato
I caratteri variabili sono file di caratteri che possono memorizzare una serie di variazioni di design in più assi e la nuova versione dell'API CSS di Google Fonts ne include il supporto. L'aggiunta di un ulteriore asse di variazione consente una nuova flessibilità con un carattere, ma può quasi raddoppiare le dimensioni del file del carattere.
Se la tua richiesta all'API CSS è più specifica, l'API CSS di Google Fonts può fornire solo la parte del carattere variabile necessaria al tuo sito web, in modo da ridurre le dimensioni del download per gli utenti. In questo modo è possibile utilizzare i caratteri variabili per il web senza tempi di caricamento delle pagine lunghi. Puoi farlo specificando un singolo valore su un asse o un intervallo; puoi anche specificare più assi e più famiglie di caratteri in un'unica richiesta. L'API è flessibile per soddisfare le tue esigenze.
Semplice da implementare, ottimizzato per te
L'API CSS di Google Fonts ti aiuta a pubblicare caratteri:
- Maggiore compatibilità con i browser web.
- Il più piccolo possibile.
- Consegna rapida.
- Più facile da usare.
Per ulteriori informazioni su Google Fonts, visita il sito fonts.google.com. Per scoprire di più sull'API CSS, consulta la documentazione dell'API.
Ringraziamenti
Immagine hero di leesehee.