What Is Transfonter and What Does It Do?

Updated

Transfonter is a free online webfont generator that converts desktop font files into web-ready formats and produces the matching @font-face CSS for you. Use it when you have a font file (TTF, OTF, and many others) and want to serve it on a website without hand-writing conversion and CSS work. The tool runs in the browser: you upload fonts, click Convert, and download a zip containing converted font files, CSS styles, and a demo page.

What Transfonter actually produces

The output is not just font files. Each conversion gives you:

  • Converted font files in the output formats you select (WOFF, WOFF2, TTF, EOT, SVG).
  • A CSS file with ready-to-use @font-face rules.
  • An HTML demo page so you can preview the font in a browser before deploying.

This matters because @font-face lets developers supply their own fonts instead of relying on the limited set installed on users' computers. Transfonter handles the format side of that, which is normally the tedious part.

Supported input and output formats

Stage Formats
Input (upload) TTF, OTF, WOFF, WOFF2, SVG, TTC, DFONT, BIN, CFF, PFA, PFB, PS, PT3, SFD, T11, T42
Output (selectable) TTF, EOT, WOFF, WOFF2, SVG

Upload limits are 5 MB per file and up to 20 files per conversion. For typical web use, WOFF2 is the modern default and WOFF covers older browsers; EOT and SVG exist mainly for legacy support.

Conversion settings worth knowing

Before converting, Transfonter exposes options that change the generated CSS and files:

  • Family support and Add local rule — control how the @font-face family is declared and whether a local() source is included, so users with the font installed skip the download.
  • Fix vertical metrics — normalizes line-height behavior across platforms, useful when a font renders inconsistently.
  • Base64 encode — embeds font data directly in CSS, trading a larger stylesheet for one fewer request.
  • Hinting — keep existing hinting, run TTFAutohint, or strip hinting entirely (stripping reduces file size).
  • Subsets — limit the font to specific characters or Unicode ranges, which can shrink files substantially.
  • Font display — set the CSS font-display value (auto, block, swap, fallback, optional) to control how text renders while the font loads.
  • Demo page language — generate the preview page in English, French, Georgian, German, Portuguese, Russian, or Spanish, or skip the demo page.

How to convert a font, step by step

  1. Prepare the file. Confirm it is under 5 MB and in a supported format.
  2. Upload. Click the "Upload your fonts" block (or drag and drop) and select your files — up to 20.
  3. Choose settings. Pick output formats and adjust family support, hinting, subsets, and font display as needed.
  4. Convert. Click the Convert button.
  5. Verify. Download the zip, open the demo page, and check that glyphs, weights, and line spacing look correct.
  6. Deploy. Copy the font files and CSS into your project and reference the family in your stylesheets.

Common snags

  • File too large: the 5 MB per-file cap will reject some full CJK or variable fonts; subsetting first or using a lighter cut helps.
  • Missing glyphs after conversion: check the Subsets setting — an overly narrow range drops characters.
  • Inconsistent line height: try enabling Fix vertical metrics.
  • Legacy browser support: include WOFF and EOT alongside WOFF2 if you must support old browsers.

Transfonter is best treated as a one-step converter and CSS generator: it saves you from manually producing multiple font formats and writing @font-face blocks, while leaving hosting and integration to you.