ZeroServer.tools

CSS @font-face Generator

Generate CSS @font-face rules for self-hosted web fonts with all browser formats.

Font Settings

Font Family Name

font-weight

font-style

font-display

Font URLs

WOFF2 URL (recommended)

WOFF URL (legacy)

TTF URL (fallback)

unicode-range (optional)

Show multiple weights tip

CSS Output

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

CSS @font-face Generator — self-host any web font

The CSS @font-face rule lets you serve custom fonts directly from your own server, avoiding third-party requests to Google Fonts or Adobe Fonts. WOFF2 is the most efficient format and is supported by all modern browsers — include WOFF as a fallback for older browsers. Set font-display: swap to render text immediately with a system fallback while the custom font loads, preventing invisible text (FOIT). Use unicode-range to subset the font to only the characters you need, reducing download size. For variable fonts (a single file supporting all weights), set font-weight: 100 900.

Private & free — this tool runs entirely in your browser.