How to generate @font-face CSS from font files
Add your font files, check the detected properties, and choose how the CSS should reference each file. Webfont CSS Generator keeps the files in the browser while it builds CSS for copying, downloading, or previewing.
Set the file properties and output mode
- Drop webfont files here or click
browse files. The picker accepts WOFF, WOFF2, TTF, OTF, and TTC files. - Edit Family name, Weight, Style, and font-display for each file.
- Enter a value in unicode-range (optional) when the rule should cover a defined character range.
- Choose URL path or Data URI (embedded base64), then set Path / URL prefix for URL path output.
- Review the generated CSS, then use Copy generated CSS or Download .css file.
The file signature is checked before the file is added. Renaming an unrelated file does not make it a recognized font. If reading fails, the status shows Couldn't read with the filename.
How file metadata fills the CSS fields
For TTF, OTF, and WOFF files, the script reads family and subfamily data when it finds it, then uses the font data to fill Weight and Style. WOFF2 metadata is not read because its table data is compressed, so Family name, Weight, and Style begin as guesses based on the filename.
Files with the same Family name, Weight, Style, and unicode-range (optional) value share one @font-face rule. Their sources are placed in one src list in format order. If those files have different font-display values, the last file added determines the rule.
Family name: Brand
Weight: 400 - Normal
Style: normal
Path / URL prefix: /fonts/
File: Brand-Regular.woff2
@font-face {
font-family: "Brand";
src: url("/fonts/Brand-Regular.woff2") format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Choose how the CSS references each font
URL path writes the configured Path / URL prefix before each uploaded filename. Put the original font at that resulting path. The stylesheet and Show live preview use that URL when they load the font.
Data URI (embedded base64) places the whole font in the CSS as base64 text. The CSS is roughly a third larger than the original file, and the font cannot be cached separately from the stylesheet. The warning appears at 50 KB, with a stronger warning at 100 KB.
Preview and save the CSS
Turn on Show live preview, choose a rule under Preview which @font-face rule, and replace the text under Sample text. URL path mode needs a working file path. The preview applies the generated CSS to the sample on the page.
Copy generated CSS sends the result to the clipboard when clipboard access is available. Download .css file creates webfont-faces.css. The generated CSS references or embeds the uploaded bytes, while the tool leaves the font format and contents unchanged.
Examples with grouped font files
- For
Brand-Regular.woff2in/fonts/, set Path / URL prefix to that directory and keep the file at the resulting URL. - For regular, bold, and italic files, set Weight and Style on each entry. Different values produce separate rules.
- For a small icon font, inspect the Data URI warning before placing the font inside the stylesheet.
When the generated CSS is the right output
Use this page when the files are already in WOFF, WOFF2, TTF, OTF, or TTC form and you need @font-face CSS. The Font Generate Tools category includes this CSS-generation task. This page adds per-file properties, URL or data sources, and a live preview.
Frequently asked questions
How do I generate @font-face CSS from WOFF2 files?
Add the WOFF2 file, then edit Family name, Weight, and Style if the filename guess is wrong. WOFF2 table data is compressed, so the tool uses the filename for these starting values.
Can I create @font-face CSS with a URL path?
Choose URL path, enter the directory in Path / URL prefix, and put each original font at the resulting filename. The CSS references that file with url(...).
Does this font CSS generator convert TTF to WOFF2?
The generator writes CSS around the uploaded files as they are. Convert a format before generating the CSS here.
Are my font files uploaded anywhere?
The script reads, parses, and encodes the files in your browser. It makes no request containing the font data.