Creare una dichiarazione CSS @font-face dai file dei font

Descriva i file nell’ordine in cui il browser deve provarli

Inizi dal nome pubblico della famiglia che userà nella proprietà font-family dell’applicazione. Aggiunga poi ogni sorgente come record separato, con percorso e indicazione del formato. L’ordine è importante: il browser legge l’elenco src da sinistra a destra e sceglie la prima risorsa supportata. Una disposizione comune mette prima un file WOFF2 compatto e poi un WOFF alternativo. Il generatore conserva esattamente la sequenza; non ordina, deduce, scarica o ispeziona i file. I percorsi possono essere URL relativi, come /fonts/newsreader.woff2, oppure indirizzi completi. Il valore format viene emesso come indicazione CSS esplicita, quindi deve corrispondere al file reale. Virgolette e barre inverse nei nomi, nei percorsi e nei formati vengono sottoposte a escape nelle stringhe CSS. I valori vuoti e i caratteri che potrebbero interrompere un descrittore sono rifiutati, invece di produrre una regola apparentemente corretta che poi fallisce nel foglio di stile. È obbligatoria almeno una sorgente, perché una regola @font-face priva di un src utilizzabile non può caricare alcun font.

Imposti peso e stile coerenti con il file

I descrittori font-weight e font-style indicano al browser quali richieste può soddisfare questa faccia. Devono descrivere i dati del file, non un effetto grafico che il browser dovrebbe sintetizzare. Per un font statico normale sono comuni il peso 400 e lo stile normal. Un file corsivo mantiene spesso lo stesso peso con italic, mentre il grassetto può usare 700. I font variabili possono accettare intervalli come 100 900, se il file contiene davvero quell’asse. Il generatore accetta testo di descrittore CSS anziché limitare i campi a un menu ristretto, permettendo sia valori convenzionali sia sintassi valida per font variabili. Rimuove gli spazi esterni e rifiuta ritorni a capo, parentesi graffe e punti e virgola che potrebbero uscire dal descrittore. Non stabilisce se il file binario contiene il peso o lo stile dichiarato. Crei una regola distinta per ogni faccia statica e mantenga coerente il nome della famiglia per i file correlati. Il normale abbinamento CSS selezionerà così la faccia corretta senza cambiare le dichiarazioni in tutto il sito.

Copi il risultato o lo generi durante la compilazione

L’output contiene una regola CSS formattata, insieme a famiglia normalizzata, numero di sorgenti, peso e stile. Copi il valore css in un foglio di stile prima dei selettori che usano la famiglia, oppure richiami il servizio da uno script che assembla le risorse tipografiche. La regola generata si concentra su famiglia, sorgenti, peso e stile. Non tenta di indovinare proprietà facoltative come font-display, unicode-range, size-adjust, ascent-override, descent-override o impostazioni delle funzionalità, perché dipendono dalla politica di caricamento, dalla copertura dei glifi e dalla compatibilità delle metriche. Le aggiunga in seguito se il progetto le richiede. Lo strumento non effettua richieste di rete e non verifica che un percorso risponda; provi quindi il foglio finale nei browser supportati e controlli il pannello di rete per individuare risorse mancanti o tipi MIME errati. La serializzazione deterministica aiuta i gruppi che pubblicano font: lo stesso input genera sempre lo stesso output, la precedenza resta verificabile e un elenco vuoto viene bloccato subito. L’uso nel browser è gratuito; una richiesta automatizzata tramite API costa $0.002.