Font Studio

Generate @font-face CSS rules for your webfonts with proper format declarations

Add webfonts

WOFF, WOFF2, TTF, OTF, EOT or SVG. Multi-upload and drag-and-drop supported.

Options

Relative path to your fonts directory

How to use:

  1. Upload your webfont files (WOFF, WOFF2 recommended)
  2. Select the formats you want to use
  3. Adjust the options as needed
  4. Click "Generate CSS" to create the @font-face rules
  5. Copy the CSS or download the file
  6. Add the CSS to your project and place the fonts in the correct directory

Tip: For optimal performance, use WOFF2 (modern browsers) and WOFF (fallback for older browsers).

Generated CSS

Upload fonts and click "Generate CSS" to start

@font-face CSS Reference

The @font-face rule lets you load custom fonts. Here is the complete syntax and format comparison.

Complete @font-face Syntax

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

/* Multiple weights */
@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont-Bold.woff2') format('woff2'),
       url('fonts/CustomFont-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Usage */
body {
  font-family: 'CustomFont', sans-serif;
}

Font Format Comparison

FormatExtensionCompressionSupport
WOFF2.woff2Best (~30% smaller)All modern browsers
WOFF.woffGoodIE9+, all modern
TTF/OTF.ttf / .otfNoneBroad, larger files
EOT.eotModerateIE only (legacy)
SVG.svgNoneLegacy iOS Safari

font-weight Values

ValueCommon name
100Thin / Hairline
200Extra Light
300Light
400Regular / Normal
500Medium
600Semi Bold
700Bold
800Extra Bold
900Black / Heavy

font-display Strategies

/* swap — show fallback immediately, swap when loaded (recommended) */
font-display: swap;

/* block — hide text briefly, then show custom font */
font-display: block;

/* fallback — short block period, then fallback if not loaded */
font-display: fallback;

/* optional — browser decides, may skip custom font on slow connections */
font-display: optional;

Performance Tips

  • 1.Use WOFF2 + WOFF only — skip TTF, EOT, SVG unless you need IE support
  • 2.Set font-display: swap to prevent invisible text (FOIT)
  • 3.Preload critical fonts: <link rel="preload" href="font.woff2" as="font" crossorigin>
  • 4.Subset fonts to include only characters you need (Latin, Latin Extended, etc.)
  • 5.Load max 2-3 font weights — each weight is a separate file download

Other tools: Clip Path Studio, Gradient Studio, URL Encoder