Free Fonts — Top Sites, Live Previews, and How to Use Them
Browse trusted sources for free fonts, test live previews, copy clean CSS, and learn the right way to use web fonts. Open-source, free-for-commercial, and personal-use collections included.
Google Fonts
OFLThe largest open-source library with fast global CDN, subsets, and variable fonts. Ideal for web and apps. Most families use the SIL Open Font License.
Fontshare (by ITF)
FreeQuality typefaces offered for free by Indian Type Foundry. Clean families, easy CDN embed, and many variable options.
Font Squirrel
Free CommercialCurated directory focused on free-for-commercial use fonts. Includes a webfont generator for self-hosting.
The League of Moveable Type
OFLClassic open-source foundry with timeless families like League Spartan and Raleway. Great for branding and editorial.
Velvetyne
OFLExperimental open-source typefaces with distinctive display styles. Perfect for posters, culture, and creative work.
Collletttivo
OFLCommunity foundry releasing high-quality free fonts under open licenses. Strong editorial and display options.
Open Foundry
OFLCurated open-source font index with testing tools and design-centric presentation. Ideal for discovering fresh families.
1001 Fonts
Mixed LicensesLarge directory with filters for free-for-commercial use. Read the license per family; many are personal-use only.
DaFont
Personal UseHuge archive best for personal projects and inspiration. Licenses vary widely; check each download page.
Icon Fonts (Font Awesome, Material Icons, Remix Icon)
Free TiersFor UI icons using a font pipeline. Consider modern SVG icon systems, but icon fonts remain useful for quick adds.
Live Preview and CSS Snippets
Local only — nothing uploadedFeature Comparison (Snapshot)
Licenses vary by family| Site | Open Source | Free Commercial | Variable Fonts | CDN/Webfonts | Notes |
|---|---|---|---|---|---|
| Google Fonts | Yes | Yes* | Yes | Yes | Largest library, fast CDN |
| Fontshare | Mixed | Yes | Many | Yes | Modern families |
| Font Squirrel | Mixed | Yes* | Some | Generator | Curated for commercial use |
| League of Moveable Type | Yes | Yes | Some | Self-host | Timeless classics |
| Velvetyne | Yes | Yes | Some | Self-host | Experimental display |
| DaFont | No | Varies | Few | No | Great for personal projects |
How to Use Free Fonts on the Web
- Check the license: OFL and other permissive licenses are best for commercial projects. Some sites list personal-use-only fonts.
- Choose delivery: CDN link for speed, or self-host with @font-face for control and privacy.
- Preload critical fonts for your hero text if CLS is a concern; define fallback stacks to avoid flashes.
- Prefer variable fonts when available to reduce requests and get flexible weights.
CDN Example
<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>
Self-host Example
@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; }
* Always verify each family’s license on the source site.
FAQs
Are Google Fonts free for commercial use?
Most are released under OFL and are free for commercial use. Confirm the license on each family page.
Should I use icon fonts or SVG icons?
SVG icons are more flexible for modern apps. Icon fonts remain useful for quick setups or legacy pipelines.
Do web fonts affect site speed?
Yes. Use font-display: swap, subset where possible, and limit families and weights.
What is the best general-purpose font?
Inter, Roboto, and Source Sans 3 are versatile. Pair with a serif like Merriweather or Playfair for headings.