Self-host any font. Get the CSS.
Drop your font files. The tool detects each weight and style, then writes the @font-face rules, preload tags and CSS variables for you.
| File | Weight | Style | Size |
|---|
Showing an example. Add your own files and the output updates.
Your fonts are previewed here as soon as you add them.
Runs in your browser, nothing is uploaded Free, no sign-up No cookies, no tracking
Fallback font matcher
Stop text jumping when web fonts load.
Open tool →Fluid type scale
clamp() font sizes that scale smoothly.
Open tool →Font stack builder
Modern system font stacks, ready to copy.
Open tool →The WordPress plugin
Looking for the original Web Fonts Loader plugin? Find out where it lives now.
Plugin page →Quick answer: To self-host a font, upload your WOFF2 files to your site and add one @font-face rule per weight and style with font-display: swap. Drop your files above and this tool detects each weight and style and writes the CSS and preload tags for you. Nothing is uploaded.
How to self-host web fonts
Self-hosting means your fonts are served from your own domain instead of a third-party CDN. It avoids an extra connection, keeps visitor data private and gives you full control over caching. The job is the same each time: serve WOFF2 files and describe them with @font-face.
Which font-display value should I use?
- swap shows fallback text immediately and swaps in the web font when it arrives. It is the safest default.
- optional uses the web font only if it loads almost instantly, so it never causes a layout shift.
- fallback is a compromise: a very short block period and a limited window to swap.
Fix layout shift from web fonts
Even with swap, text can jump when the web font replaces the fallback. Use the fallback font matcher to generate a tuned fallback face.
- Add your font files. Drop every weight and style you use (WOFF2 is best) onto the page.
- Check weight and style. They are detected from the file contents and name. Change any that look wrong.
- Set the folder and font-display. Enter the URL path where the files will live and pick a font-display value.
- Copy the CSS and preload tags. Paste the CSS into your stylesheet and the preload tags into your page head.
Frequently asked questions
Is my font uploaded anywhere?
No. Your files are read in your browser to detect their weight and preview them. Nothing is sent to a server.
Which font format should I use?
WOFF2 for everything modern. Every current browser supports it and it is typically smaller than WOFF. Only add WOFF or TTF as extra sources if you must support very old browsers.
Should I preload my fonts?
Preload only the one or two fonts used above the fold, usually the regular body weight and the main heading. Preloading every weight can slow down other resources.
How are variable fonts handled?
For TTF, OTF and WOFF files the tool reads the variable axes and fills in the weight range (for example 100 900) automatically. For WOFF2 files, type the range yourself.
Do I need unicode-range?
Only if your files are subsets, such as a Latin-only file. The optional Latin range tells the browser to download the file only when the page uses those characters.
Get the free browser extension
Web Font Inspector for Chrome, Edge and Opera.