Free Online Web Font CSS Generator for @font-face Blocks
Write the @font-face blocks and the matching font-family stack for a self hosted web font. Add each weight and style with its file name, choose font-display, set a unicode-range subset and fallback metric overrides, and take the preload link too. No font is uploaded or fetched here.
Handgloves quickly vexed the brazen judge.
The quick brown fox jumps over the lazy dog, 0123456789.
This preview uses a system font stack. Your font file is never loaded here, so treat the sample as a check on size, weight and line length, not on the shape of the letters.
Preload for the critical font
Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.
Where each piece goes
The order matters more than the values.
The preload link belongs in the <head>, before the
stylesheet that references the font, and it should name one file: the weight used by your
first screen of text. Preloading four weights is a common mistake, because each one competes
with the CSS and with the image at the top of the page.
The @font-face blocks go at the top of your stylesheet,
or in a small file of their own that loads first. They declare nothing visible on their own; a
browser downloads a face only when something on the page actually asks for that family at that
weight, which is why an unused weight in your CSS costs nothing until it is referenced.
The font-family stack is what applies the
font. Keep the fallback in it even after the web font works, because the fallback is what
people see during the swap period and on the request that fails. A stack that ends in a bare
generic family such as sans-serif always has a last resort.
How to Write @font-face CSS
A few steps, and nothing is uploaded.
What to Know About Loading Web Fonts
Including what font-display actually trades away.
block the text is invisible for up to about three seconds while the font downloads, then appears in the right font. With swap the fallback font is painted immediately and is replaced when the web font arrives, so nothing is ever invisible but the text visibly reflows. swap is the usual answer because unreadable text is a worse failure than a jump, and because a slow connection turns block into a blank page. optional is stricter still: the font is used only if it arrives almost at once, otherwise it is left for the next page load.
Key Features & Capabilities
What this tool does, and what it deliberately does not.
About the Web Font CSS Generator
Self hosting a font is three small pieces of text that are easy to get subtly wrong: an @font-face block for each weight, a font-family rule that uses them with a sensible fallback behind it, and one <link rel="preload"> for the file the first screen of text needs. The syntax is not long, but the order of the src formats matters, the font-weight in the block has to match what you later ask for, and one mistyped path fails silently into the fallback.
This page writes those three pieces from a list of faces. Add a row for each weight and style, give it a file name, and every row becomes a block sharing one family name. The loading section covers font-display with a plain statement of what each value trades, because that single descriptor decides whether a visitor on a slow connection sees no text or the wrong text, and the two are not equally bad. The subset and metric sections are there for the cases that need them and are left out of the output when they are not set.
It is worth being clear about the limits. Nothing is uploaded, no font file is read, and no conversion or subsetting happens, so the tool cannot tell you whether the file at that path exists or which weights it contains. The preview is deliberately honest about this too: it renders the sample in a system font stack so you can judge size and line length, and it says on the page that the letters you are looking at are not your font.
Frequently Asked Questions
Formats, display values, preload, subsets and metric overrides.
block hides the text for up to around three seconds hoping the font arrives, which on a slow connection means a blank page. swap paints the fallback immediately and replaces it when the font loads, so text is always readable but visibly shifts. fallback is a short block period then a swap, and optional uses the font only if it is almost instant. Choose swap unless you have a specific reason not to.crossorigin. A preload without that attribute fetches the font on a different connection from the one the CSS will use, so the file is downloaded twice. Preload exactly one file, the weight your headline and first paragraph need, and let the rest load normally.