How to make a webfont kit
- Add the font files. Regular, bold and italic of the same family can go in together; each becomes its own @font-face rule with the right weight and style.
- Pick the formats. WOFF2 is all you need for current browsers; WOFF covers older ones; TTF/OTF is for desktop apps.
- Press Make webfont kit, check the preview and download the ZIP.
The family name, weight and italic setting are read from inside each font, so the CSS is correct without typing anything. You can change the family name under More options.
Which format to use
| Format | Size | Use it for |
|---|---|---|
| WOFF2 | Smallest, often 30–50% smaller than TTF | Every modern browser. Use this first. |
| WOFF | Small | Older browsers. Optional today. |
| TTF / OTF | Largest | Installing on a computer, design apps, video editors. |
What is in the kit
- fonts/ with the converted files
- stylesheet.css with one @font-face rule per file and font-display: swap, so text appears at once while the font loads
- demo.html to check every weight in your browser
- An optional stylesheet with the WOFF2 embedded, for single-file pages
Font licences
Converting a font does not change its licence. Free fonts from Google Fonts and other open-source fonts can be used on websites. Many paid fonts need a separate web licence, so check before you upload. The tool also turns WOFF2 and WOFF back into TTF, which helps when you have only a web copy of a font you are allowed to install.
Questions people ask
Does it change how the font looks?
No. WOFF2 and WOFF are compressed packages of the same font data; the letters are identical.
Can it convert WOFF2 to TTF?
Yes. Add the WOFF2 file and tick TTF / OTF.
What about variable fonts?
They are converted too, and the CSS gets a weight range such as 100 900.
Is my font uploaded?
No. The conversion, including WOFF2 compression, runs in your browser.