How to generate @font-face CSS
Start with an existing font file when the next step is a stylesheet declaration. This category contains Webfont CSS Generator, which accepts WOFF, WOFF2, TTF, OTF, and TTC files, then creates a ready-to-paste @font-face block. You can set the font reference to a URL path or an embedded data URI.
Generate webfont CSS from a font file
Open Webfont CSS Generator when you have a font file and need its CSS declaration. Upload a WOFF, WOFF2, TTF, OTF, or TTC file. The generator creates the @font-face block and lets you choose a URL path or an embedded data URI for the font reference.
Check the live preview before copying the declaration into a stylesheet. The preview gives you a view of the generated setup while you adjust the available values.
Set the font CSS values
Set weight, style, font-display, and unicode-range in the generator. Choose a URL path when the CSS should point to a font file. Choose an embedded data URI when the font data should sit inside the CSS reference.
Where generating @font-face CSS comes up
- A front-end developer has a TTF or OTF file from a design handoff and needs a CSS block for a page stylesheet.
- A site maintainer has WOFF and WOFF2 files and needs declarations with chosen file references and font settings.
- A developer is checking a font before adding it to a project and uses the live preview to inspect the generated setup.
When to use Font Tools
Use this category when the task ends with CSS for an existing font file. Go to Font Tools for conversion, subsetting, preview, or comparison tasks. Webfont CSS Generator is the child page for turning a font file into CSS.
Frequently asked questions
How do I generate @font-face CSS for a web font?
Open Webfont CSS Generator with a WOFF, WOFF2, TTF, OTF, or TTC file. Choose the CSS settings, review the live preview, and copy the generated @font-face declaration.
Can I generate CSS from a WOFF2 or TTC file?
Yes. Webfont CSS Generator accepts WOFF, WOFF2, TTF, OTF, and TTC font files.
What is the difference between a URL path and an embedded data URI?
A URL path points the CSS to a font file. An embedded data URI places the font data in the CSS reference. The generator supports both output choices.
Does the font generator upload my file?
Webfont CSS Generator runs locally in your browser, so the font file stays in the browser and is not uploaded.