CSSAwwwards
+ Submit tool
Built-in toolFree · No signup

CSS @font-face Generator

Build complete @font-face declarations for self-hosted web fonts. Add file paths for woff2, woff, and ttf formats — the generator outputs the correct src: with format() hints in performance order. Set font-display, weight, style, and optional unicode-range for variable font ranges.

Shows fallback immediately, swaps when loaded. Best for body text.

CSS Output
@font-face {  font-family: MyFont;  src: url('/fonts/myfont.woff2') format('woff2'),       url('/fonts/myfont.woff') format('woff');  font-weight: 400;  font-style: normal;  font-display: swap;} /* Usage */body {  font-family: MyFont, sans-serif;}

How to use

01

Enter font name

Set the font-family name that you'll reference in your CSS. It can be any string — wrap multi-word names in quotes.

02

Add file paths

Enter the URL or relative path for each format. woff2 is required and loads first for best performance.

03

Set descriptors

Choose font-weight (single value or variable range like 100 900), font-style, and font-display strategy.

04

Copy CSS

The output includes the @font-face block and a sample font-family: declaration to use it in your stylesheet.

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →