Generatore di @font-face
Scegli i file del font.
Come si usaUn font proprio nel sito, nel modo giusto
.woff2, .woff, .ttf o .otf, anche più di uno insieme
CSS
Scegli i file per generare il codice.
Preload (no <head>, só das fontes da primeira tela)
Disponibile in: 
Generatore di @font-face: a cosa serve
Per usare un font proprio nel sito, senza dipendere da Google Fonts, bisogna ospitare i file e dichiarare ciascuno con @font-face. Sbagliare il peso o dimenticare il font-display lascia il testo invisibile durante il caricamento o con il grassetto finto.
Scegli i file e lo strumento scopre peso e stile dal nome (Regular, Bold, SemiBold, Italic, 700, variabile), raggruppa i formati della stessa variante, genera le regole con font-display: swap e il tag preload con crossorigin per il font della prima schermata, e mostra un’anteprima con il font vero.
Come si usa
- Scegli i file del font.
- Controlla il nome della famiglia, i pesi e la cartella.
- Copia il CSS e il tag di preload.
Quando usarlo
- Usare il font del brand nel sito.
- Ospitare il font invece di usare Google Fonts.
- Correggere un font che appare con il grassetto sbagliato.
Domande frequenti
Quale formato di font usare?
WOFF2. È compresso e accettato da tutti i browser attuali, quindi nella maggior parte dei siti basta quello. TTF e OTF funzionano, ma pesano molto di più; converti in WOFF2 prima di pubblicare.
A cosa serve font-display: swap?
Mostra subito il testo con un font di sistema e lo sostituisce con il tuo quando ha finito di scaricarsi. Senza, il browser può nascondere il testo per qualche secondo, cosa che PageSpeed segnala come problema.
Devo usare il preload su tutti i font?
No, solo su quelli usati subito nella prima schermata, di solito uno o due (il testo del corpo e il titolo). Troppi preload competono per la connessione con l’immagine principale e possono peggiorare il caricamento. Il preload dei font richiede l’attributo crossorigin, anche sullo stesso dominio.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.