Font CSS Generator

The font CSS generator turns a self-hosted family's file list into a complete set of @font-face rules plus a preload hint for the weight used above the fold. Each weight and italic is declared as its own face.

What is Font CSS Generator?

The font CSS generator builds the whole @font-face block for a self-hosted family from a short table of faces. You set the CSS family name, the directory slug the files live under, the file format, the font-display value and the weight to preload, then describe each face as a weight, a style and a file suffix. The output is one declaration per face in the order you listed them, followed by a font preload link for the chosen weight. The readout counts the declarations, the distinct files referenced and the directory the URLs are built from.

• Formats: woff2, woff and ttf, applied to every face in the table at once.
• font-display values: swap, block, fallback and optional, each labelled with its behaviour during load.
• Preload weight options: 300, 400, 500, 600 and 700.
• Face weights run the full 100 to 900 range, with normal or italic styling per face and a free-text file suffix.
• The table opens with five faces — 300 normal, 400 normal, 400 italic, 500 normal and 700 normal — and Add face appends a 600 normal entry you can edit.

Every declaration is assembled from the same three inputs, so the URLs follow one predictable shape: /fonts/<slug>/<slug>-<face-suffix>.<format>. The format value is written twice, once inside url() and once as the format() hint, which is what lets the browser skip a file it cannot decode before downloading it. The preload tag is generated separately: it looks up the first normal-style face whose weight matches the preload selection and emits a link with as="font", the matching type attribute and crossorigin, which is required because font fetches are always CORS-mode even on the same origin. Italic faces are declared with font-style: italic rather than a separate family, so an italic run inside a paragraph switches to the italic file without any extra CSS.

• One format for the whole set. A mixed deployment — woff2 with a woff fallback — has to be generated as two passes and merged by hand.
• URLs are composed from the naming convention. If your build emits different filenames, the suffixes in the table must be edited to match exactly.
• No unicode-range descriptor, so a family split into subsets across several files cannot be expressed here.
• The preload tag covers one weight and always the normal style; italic and additional weights are not preloaded.
• Directory slug, format and font-display are global, and nothing verifies that the referenced files exist at those paths.

Use it when a family is genuinely self-hosted and the deployment naming is predictable — the common case for a design system that ships woff2 files from a single folder and wants one declaration per face with an honest font-display value. Pair it with a preload for the single weight that renders above the fold, and leave the rest to load on demand. When one declaration with metric overrides is the real requirement, the @font-face declaration builder covers that case; when the family comes from Google's CDN rather than your own directory, the Google Fonts CSS generator is the right source of markup.

How to use Font CSS Generator

1. Enter the CSS font-family value and the directory slug the font files are served from.
2. Choose the file format and the font-display behaviour, then set the weight to preload.
3. Describe each face in the table — weight, normal or italic, and the file suffix — adding rows for any weight the family ships.
4. Copy the @font-face rules and the preload link into the document head.

When to use Font CSS Generator vs related tools

This is the page for a family you host yourself and want declared face by face. For the single-declaration case with size-adjust and ascent overrides, the @font-face declaration builder is the tighter fit, and the font base64 encoder is the alternative when the font has to travel inside the document instead of beside it. When the family comes from a hosted collection, the Google Fonts CSS generator writes the request markup, and the font loading strategy builder is where preload, font-display and fallback decisions get planned as a whole.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Font CSS Generator