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