CSS Font-Face Generator

Generate CSS @font-face declarations with fallback fonts and format optimization

Configuration

Configure your @font-face declaration settings

Font Family Name

Font Weight

Font Style

Font Display Strategy

Font URLs (ordered by priority)

WOFF2

WOFF

TTF

OTF

Unicode Range (optional)

Example: U+0025-00FF, U+4E00-9FFF

Generated CSS

Copy and paste this into your stylesheet

@font-face {
  font-family: 'MyFont';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Preview

Preview text with the generated font style

The quick brown fox jumps over the lazy dog.

Note: Preview will use system fonts if the font is not loaded.

Loading tool...