Free webfont generator

Generate a web font kit from your desktop fonts

Drop in TTF or OTF files, one weight or a whole family. You get WOFF2 files and ready-to-paste@font-face CSS, with fallback fonts that keep the page steady while the fonts load.

Webfont generator

Fonts in, web font kit out.

Private by design · no file upload

1. Add your fonts

Up to 25 MB per file

Drop fonts here, or browse filesTTF, OTF, WOFF, WOFF2, and TTC collections · one file or a whole family

2. Choose an output format

3. Convert and download

Select a font to get started.

Advanced options· Subsetting, variable axes, line spacing and hinting, fallback fonts, font-display, snippets

Loading options…

CSS in the web font kitfont-displayAdd local() sourcesUses the font's full and PostScript names. Only helps visitors who have this exact font installed.Embed fonts in the CSS (base64)No separate font files. The CSS grows by about a third more than the fonts and can't be cached on its own.Font folderWhere the font files will live, relative to the CSS file.

CSS and code snippets

Add fonts to see the CSS.

Your CSS choices are saved in this browser.

How to generate a web font kit

Add every weight and style of the family above. Fonts that belong together share one font-family.
In the options, choose font-display, the font folder, and whether to add local()sources or embed the fonts as base64.
Keep the fallback font CSS on, or pick the system fonts it should adjust.
Subset the fonts or fix their vertical metrics if you need to. The sizes shown are measured.
Generate, then download the kit and copy its folder into your site.

What the generator writes

fonts/: One WOFF2 file per font, named after the original file.
style.css: @font-face rules with the real family, weight, style, and width, then the fallback fonts.
index.html: A sample page with every weight, and a switch that shows the layout shift with and without the fallback.
README.md: The CSS again, preload tags, and snippets for Next.js, Tailwind, and Astro.

Good to know

Webfont generator questions

What is in the web font kit?

A fonts/ folder with one WOFF2 file per font, style.css with an @font-face rule for each file and metric-adjusted fallback fonts, index.html to check the fonts and compare the fallback, and README.md with the CSS, preload tags, and snippets for Next.js, Tailwind, and Astro.

Why does the kit only contain WOFF2?

Every browser in use today reads WOFF2, and it is the smallest of the web formats. Older kits added WOFF, EOT, and SVG files for browsers that are long gone; leaving them out keeps your CSS short. If you still need WOFF, choose it as the output format and download the files.

How is this different from the Font Squirrel Webfont Generator?

The idea is the same: drop in desktop fonts and get files and CSS for the web. This generator runs in your browser, so the fonts are never uploaded, and the CSS adds what current sites need: real weights and styles, font-display, unicode-range for subsets, fallback fonts that limit layout shift, and framework snippets.

Can I keep only the characters my site uses?

Yes. Turn on subsetting in the options below the converter, pick character sets or type your text, and the kit is built from the smaller files with a matching unicode-range. You can also split fonts the way Google Fonts does.

What are the fallback fonts in the CSS?

System fonts such as Arial or Times New Roman, scaled with size-adjust and the ascent, descent, and line gap overrides to take up the same space as your font. Visitors see them until the web font loads, so the page barely moves when it arrives.

Are my fonts uploaded?

No. Converting, subsetting, and writing the CSS all happen in your browser, and once the page has loaded it works offline too. Check that your font license allows web use before you publish the kit.