How to Convert a Font to @font-face CSS with Transfonter

Updated

Transfonter converts an uploaded font into web font formats (TTF, EOT, WOFF, WOFF2, SVG) and returns a zip archive containing the converted font files, the CSS @font-face styles and a demo page. You can use it when you have a font file you are licensed to embed on the web and need browser-ready formats plus the matching CSS. The workflow is: upload, adjust settings, convert, download.

Before you start

  • Accepted input formats: TTF, OTF, WOFF, WOFF2, SVG, TTC, DFONT, BIN, CFF, PFA, PFB, PS, PT3, SFD, T11, T42.
  • Size and count limits: 5 MB per file, up to 20 files per conversion.
  • Licensing: the tool does not check font licenses. Confirm your font's license permits web embedding before you publish the output.

Step-by-step conversion

1. Upload the font

Click the Upload your fonts block and select files from your computer, or drag and drop them onto the page. The page lists the accepted formats and the 5 MB / 20 file limits next to the drop area, so you can check a file is eligible before uploading.

2. Choose output formats

Under Output formats, select which formats to generate: TTF, EOT, WOFF, WOFF2 and SVG. WOFF2 and WOFF cover modern browsers; EOT exists for legacy Internet Explorer. Selecting fewer formats produces a smaller zip and less CSS.

3. Adjust conversion settings

The settings panel includes:

Setting What it does
Family support Adds support for the font family
Fix vertical metrics Normalizes vertical metrics across the generated files
Add local rule Includes a local() source in the generated @font-face rule
Base64 encode Embeds font data directly in the CSS instead of referencing files
Hinting Keep existing TTF hinting, run TTFAutohint, or strip hinting
Subsets Limit the output to selected character sets / Unicode ranges
Font display Set the font-display value: auto, block, swap, fallback, optional
Demo page language Without demo page, or English, French, Georgian, German, Portuguese, Russian, Spanish
Fonts directory Set the directory path used in the generated CSS

Two choices matter most in practice:

  • Subsets: restricting to the characters you actually use shrinks the files. If you subset too aggressively, missing glyphs will fall back to another font on the page.
  • Font display: swap shows fallback text immediately and swaps in the web font when loaded; block hides text briefly; optional lets the browser skip the web font on slow connections. Pick based on how much layout shift you can tolerate.

4. Convert and download

Click Convert. Transfonter then produces a zip archive. Download it and unzip; it contains the converted font files, the CSS styles and the demo page (unless you chose "Without demo page").

5. Verify the result

Open the included demo page in a browser to confirm the font renders as expected. Then check the CSS file: the @font-face rule should reference the file paths matching your Fonts directory setting, and the src list should include the formats you selected. If you enabled Base64 encode, the CSS will contain embedded data rather than file URLs.

Common snags

  • File rejected at upload: check it is under 5 MB and in one of the listed formats; TTC and DFONT collections may need to be split first.
  • Font looks wrong after conversion: try keeping or re-running hinting, or enable Fix vertical metrics if line spacing looks off.
  • Missing characters on the page: your subset was too narrow — regenerate with broader subsets or "All Characters".
  • CSS paths broken after moving files: the paths in the generated CSS follow the Fonts directory value; update it to match your site structure or edit the CSS paths after download.

The page also notes the purpose of the output: the @font-face CSS rule lets you serve your own fonts so a site no longer depends on the limited set of fonts installed on visitors' computers.