Add your font files (or their URLs) and get clean @font-face rules with the right formats, weights and styles, read straight from the fonts themselves. Preview every face before you paste the CSS; files never leave your device.
Last updated:
Choose font files or drop them here
WOFF2, WOFF, TTF, OTF or EOT · several weights at once
Font faces 0
@font-face CSS
Preload tags for your <head>
Advertisement
Advertisement
How to use the CSS @font-face Generator
Add fonts: choose or drop your .woff2, .woff, .ttf or .otf files, or paste a font URL and press Add URL.
Check each face: the family, weight and style are filled in from the font; adjust them if needed.
Set the path where the files will live on your site (for example /fonts/), and choose font-display and a unicode-range.
Preview the faces with your own sample text.
Copy the CSS (and the optional preload tags) or download it as a .css file.
Font formats and their format() names
File
format()
MIME type
Notes
.woff2
format('woff2')
font/woff2
Brotli compressed; smallest; all current browsers. List it first.
.woff
format('woff')
font/woff
zlib compressed; fallback for very old browsers (IE 9-11).
.ttf
format('truetype')
font/ttf
Uncompressed desktop font; works but is much larger.
.otf
format('opentype')
font/otf
OpenType with CFF outlines; uncompressed.
.eot
format('embedded-opentype')
application/vnd.ms-fontobject
Internet Explorer 6-8 only; obsolete.
The browser walks the src list from left to right and downloads the first format it supports, so the smallest format goes first. Need WOFF2 files? Convert TTF fonts with the TTF to WOFF2 converter.
One family, many weights
Give every file of a family the samefont-family name and describe it with font-weight and font-style. Then font-weight: 700 or <strong> picks the bold file automatically and the browser never has to fake bold or italic. A variable font covers a whole range in one file: declare it with a range such as font-weight: 100 900;.
Common weight names: 100 Thin, 200 Extra Light, 300 Light, 400 Regular, 500 Medium, 600 Semi Bold, 700 Bold, 800 Extra Bold, 900 Black.
Fast loading checklist
Serve WOFF2 and use font-display: swap (or optional for zero layout shift).
Preload only the one or two fonts used above the fold; crossorigin is required on font preloads even for same-origin files.
Split large fonts with unicode-range so visitors only download the scripts they need.
Cache font files for a long time (for example Cache-Control: max-age=31536000, immutable).
Frequently asked questions
What is @font-face?
@font-face is the CSS at-rule that loads a custom font file and gives it a family name. Once declared, you use that name in font-family like any other font. Each combination of weight and style needs its own @font-face rule with the same font-family name.
Which font formats do I need today?
WOFF2 alone is supported by every current browser and is the smallest. Adding WOFF covers very old browsers such as Internet Explorer 9-11. TTF/OTF work but are larger, and EOT and SVG fonts are only needed for long-obsolete browsers.
What does font-display: swap do?
It shows the text immediately in a fallback font and swaps to the web font when it has loaded, so text is never invisible. fallback and optional limit how late the swap can happen, which reduces layout shift; block hides text briefly while the font loads.
What is unicode-range for?
unicode-range tells the browser which characters a font file covers. If a page uses no characters in that range, the file is not downloaded at all. It lets you split a font into subsets such as Latin and Cyrillic, like Google Fonts does.
Why is my font not loading?
Check that the url() paths are correct relative to the CSS file, that the server sends the font with a correct MIME type, and that fonts served from another domain include an Access-Control-Allow-Origin header. The family name in font-family must match the @font-face name exactly.
Should I embed fonts as Base64?
Usually not. Base64 makes the font about 33% larger, blocks CSS parsing until it is downloaded and cannot be cached separately. It can be handy for a single small icon font or an HTML email, but normal font files with preload are faster.
Am I allowed to self-host a font?
That depends on the font license. Open-source fonts such as those under the SIL Open Font License can be self-hosted freely; commercial fonts often need a webfont license. Check the license before publishing font files on your site.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.