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. Ciò che in passato 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 CSS di Google Fonts si è evoluta nel corso degli anni per stare al passo con le modifiche alla 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.
Tutto questo avviene includendo una singola riga di codice HTML nel codice.
Come utilizzare l'API CSS di Google Fonts
La documentazione dell'API CSS di Google Fonts lo riassume bene:
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.
Devi inserire almeno una 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 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 carattere con parametri che l'API non ha attualmente memorizzato nella cache, il servizio creerà un sottoinsieme dei caratteri al volo, utilizzando HarfBuzz per farlo rapidamente, e restituirà il CSS che li indica.
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 è importante 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 fornirà agli utenti file CSS con unicode-range già abilitato (se supportato dal browser web), in modo che carichi i caratteri solo per i caratteri specifici di cui ha bisogno 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 uno di questi caratteri viene visualizzato nella pagina, il carattere viene scaricato. Questo metodo funziona bene per tutti i tipi di lingue, quindi puoi utilizzare un carattere che includa 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.
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 dell'intervallo 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:
- Ospita autonomamente 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
Il team di Google Fonts contribuisce anche ai nuovi standard W3C che continuano a innovare le tecnologie dei caratteri web, come WOFF2. Un progetto attuale è il trasferimento incrementale dei caratteri, che consente agli utenti di caricare parti molto piccole dei file dei caratteri man mano che vengono utilizzati sullo schermo e di riprodurre in streaming il resto su richiesta, superando le prestazioni di unicode-range. Quando utilizzi la nostra API per i caratteri web, i tuoi utenti ricevono i miglioramenti della tecnologia di trasferimento dei caratteri sottostanti quando diventano disponibili nel loro 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? È tutto a posto. 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 richiesta dell'API CSS è più specifica, l'API CSS di Google Fonts può pubblicare solo la parte del carattere della variabile necessario per il tuo sito web, in modo da ridurre le dimensioni di download per gli utenti. In questo modo è possibile utilizzare i caratteri variabili per il web senza tempi di caricamento delle pagine lunghi. Per farlo, devi specificare 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:
- Più compatibile con i browser web.
- Il più piccolo possibile.
- Consegna rapida.
- Più facile da usare.
Per ulteriori informazioni su Google Fonts, visita la pagina fonts.google.com. Per ulteriori informazioni sull'API CSS, consulta la documentazione dell'API.
Ringraziamenti
Immagine hero di leesehee.