Caratteri gratuiti: siti principali, anteprime live e come utilizzarli
Sfoglia fonti attendibili per font gratuiti, prova anteprime dal vivo, copia CSS puliti e impara il modo giusto di utilizzare i font web. Sono incluse raccolte open source, gratuite per uso commerciale e personale.
Caratteri Google
OFLLa più grande libreria open source con CDN globale veloce, sottoinsiemi e caratteri variabili. Ideale per Web e app. La maggior parte delle famiglie utilizza la licenza SIL Open Font.
Condivisione font (da ITF)
GratuitoCaratteri tipografici di qualità offerti gratuitamente da Indian Type Foundry. Famiglie pulite, facile incorporamento della CDN e molte opzioni variabili.
Carattere Scoiattolo
Commerciale gratuitoDirectory curata incentrata sui caratteri gratuiti per uso commerciale. Include un generatore di caratteri web per il self-hosting.
La Lega dei caratteri mobili
OFLClassica fonderia open source con famiglie senza tempo come League Spartan e Raleway. Ottimo per il branding e l'editoriale.
Vellutato
OFLCaratteri tipografici open source sperimentali con stili di visualizzazione distintivi. Perfetto per poster, cultura e lavoro creativo.
Collletttivo
OFLFonderia comunitaria che rilascia font gratuiti di alta qualità con licenze aperte. Forti opzioni editoriali e di visualizzazione.
Fonderia aperta
OFLIndice curato dei caratteri open source con strumenti di test e presentazione incentrata sul design. Ideale per scoprire nuove famiglie.
1001 caratteri
Licenze misteDirectory di grandi dimensioni con filtri per uso commerciale gratuito. Leggi la patente per famiglia; molti sono solo per uso personale.
DaFont
Uso personaleEnorme archivio ideale per progetti personali e ispirazione. Le licenze variano ampiamente; controlla ogni pagina di download.
Caratteri icona (Font Awesome, Icone materiali, Icona Remix)
Livelli gratuitiPer le icone dell'interfaccia utente che utilizzano una pipeline di caratteri. Considera i moderni sistemi di icone SVG, ma i caratteri delle icone rimangono utili per aggiunte rapide.
Anteprima dal vivo e frammenti CSS
Solo locale: niente caricatoConfronto delle funzionalità (istantanea)
Le licenze variano a seconda della famiglia| Sito | Open Source | Commerciale gratuito | Caratteri variabili | CDN/Webfont | Note |
|---|---|---|---|---|---|
| Caratteri Google | SÌ | SÌ* | SÌ | SÌ | Biblioteca più grande, CDN veloce |
| Condivisione caratteri | Misto | SÌ | Molti | SÌ | Famiglie moderne |
| Carattere Scoiattolo | Misto | SÌ* | Alcuni | Generatore | Curato per uso commerciale |
| Lega di tipo mobile | SÌ | SÌ | Alcuni | Auto-host | Classici senza tempo |
| Vellutato | SÌ | SÌ | Alcuni | Auto-host | Esposizione sperimentale |
| DaFont | NO | Varia | Pochi | NO | Ottimo per progetti personali |
Come utilizzare i caratteri gratuiti sul Web
- Controlla la licenza: OFL e altre licenze permissive sono le migliori per progetti commerciali. Alcuni siti elencano caratteri solo per uso personale.
- Scegli la consegna: collegamento CDN per la velocità o host autonomo con @font-face per il controllo e la privacy.
- Precarica i caratteri critici per il testo dell'eroe se CLS è un problema; definire stack di fallback per evitare flash.
- Preferire caratteri variabili quando disponibili per ridurre le richieste e ottenere grammature flessibili.
Esempio CDN
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>
Esempio di host autonomo
@font-face{
font-family: "MyFont";
src: url("/fonts/MyFont-Variable.woff2") format("woff2");
font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
*Verifica sempre la licenza di ciascuna famiglia sul sito di origine.
Domande frequenti
I Google Fonts sono gratuiti per uso commerciale?
La maggior parte viene rilasciata sotto OFL e è gratuita per uso commerciale. Conferma la licenza su ogni pagina della famiglia.
Dovrei utilizzare i caratteri icona o le icone SVG?
Le icone SVG sono più flessibili per le app moderne. I caratteri delle icone rimangono utili per configurazioni rapide o pipeline legacy.
I caratteri web influiscono sulla velocità del sito?
SÌ. Utilizzo visualizzazione dei caratteri: scambia, sottoinsieme ove possibile e limitare famiglie e pesi.
Qual è il miglior carattere generico?
Inter, Roboto e Source Sans 3 sono versatili. Abbinalo a un serif come Merriweather o Playfair per i titoli.