FONTFACE GENERATOR // Cascading @font-face Declarations

Generate a single @font-face rule with a WOFF2-first fallback cascade — paste your file URLs, tune weight, style and font-display, and copy production-ready CSS.

Back to Labs

@font-face Generator

Build a single cascading declaration — WOFF2 first, older formats loaded only as fallback.

Load from catalog

Font Family Name

Font is installed locally

Adds local() first in the cascade — skips the download for visitors who already have it.

Weight

Style

Font Display

Cascade Sources (best format first)

WOFF2 URL

WOFF URL (fallback)

TTF / OTF URL (fallback)

Generated CSS

/* Add at least one font file URL to generate the cascade */