How to generate CSS for your font files
Add readable font files to generate @font-face CSS in your browser. The tool processes files locally and does not convert or re-encode them.
Set each font's CSS properties
- Drop files into the tool or click browse files. The visible picker lists WOFF, WOFF2, TTF, OTF, and TTC files.
- Edit Family name, Weight, and Style for each file. Readable TTF, OTF, and WOFF metadata can fill these fields; WOFF2 values are filename-based guesses.
- Set font-display and, when needed, unicode-range (optional).
- Remove an individual file with its per-file remove button before generating the CSS.
Files with the same family, weight, style, and Unicode range are grouped into one @font-face rule. A different font-display value does not create a separate group: the last matching file's value is used.
Choose URL path or embedded Data URI mode
Select URL path to reference each filename through the configured Path / URL prefix. The actual font files must be available at that generated path for the consuming stylesheet and live preview to load them.
Select Data URI (embedded base64) to place the font data in the CSS. This makes the stylesheet roughly a third larger than the original font and prevents the font from being cached separately. When this mode is selected, the tool warns for files that are 50 KB or larger and gives a stronger warning at 100 KB or larger.
Generate, copy, download, and preview the CSS
- Review the generated CSS after setting the file properties and output mode.
- Use Copy generated CSS or Download .css file.
- Enable Show live preview to inspect a selected rule and sample text. In URL path mode, the referenced font files must be accessible at the generated path or the preview cannot render them.
Troubleshoot file recognition and reading errors
- An unrecognized binary signature triggers an alert saying the file is not a recognized WOFF, WOFF2, TTF, OTF, or TTC file.
- An unreadable file triggers a Couldn't read alert with the filename.
- The script detects TTC font collections and labels them TTC (collection). The picker accepts
.ttcfiles.
Limitations and format support
- The tool generates CSS; it does not convert TTF, OTF, WOFF, WOFF2, or TTC files into another format.
- Metadata extraction is available for readable TTF, OTF, and WOFF files. WOFF2 family, weight, and style values are filename-based guesses that you can edit.
- Font data is not modified, subsetted, or hosted by this tool. URL path mode still requires you to host the actual files at the generated path.
Frequently asked questions
Does this convert font formats?
No. It only writes the @font-face CSS that references the files you uploaded, as-is. If you need to convert a TTF to WOFF2, use a dedicated font converter first, then generate the CSS here.
Should I use URL path or data URI mode?
Use URL path mode when the actual font files are available at the generated path. Data URI mode embeds the font as base64 text, makes the CSS larger, and cannot be cached separately from the stylesheet.
Why couldn't it detect the family name from my WOFF2 file?
WOFF2 table data is compressed, so this tool does not read its name table. The family, weight, and style fields use a filename-based guess that you can edit.
Is my font uploaded anywhere?
No. Reading, parsing, and base64 encoding happen locally in your browser. The font files are not uploaded by this tool.