What Conversion Settings Can You Configure in Transfonter?

Updated

Transfonter lets you configure conversion settings before generating webfonts: family support, vertical metrics fixing, a local rule, Base64 encoding, output formats, hinting, demo page language, subsets/Unicode ranges, and font display. These options appear on the Webfont generator page after you upload fonts, and the converted files, CSS, and demo page are delivered as a zip archive.

How the conversion flow works

  1. Upload fonts — drag and drop files or browse. Accepted inputs: TTF, OTF, WOFF, WOFF2, SVG, TTC, DFONT, BIN, CFF, PFA, PFB, PS, PT3, SFD, T11, T42. Limits: 5 MB per file, up to 20 files.
  2. Adjust conversion settings (detailed below).
  3. Click Convert — the tool produces a zip archive containing converted fonts, CSS styles, and a demo page.

Settings you can configure

Family support

Enables family-level handling in the generated output, so related font styles can be grouped under one font family rather than treated as unrelated faces.

Fix vertical metrics

Normalizes vertical metrics across the font files. This matters when different weights or styles of the same family have inconsistent ascent/descent values and text jumps between lines or sizes.

Add local rule

Adds a local() source to the generated @font-face rule, so a browser can use an installed copy of the font before downloading the webfont file.

Base64 encode

Embeds font data directly in the CSS as Base64 instead of referencing separate font files. This reduces the number of requests but increases CSS size — useful for small fonts or single-file delivery.

Output formats

You can select which formats to generate: TTF, EOT, WOFF, WOFF2, SVG. For modern web use, WOFF2 is the primary format; the others serve older browser support. Select only what your audience needs to keep the archive small.

Hinting

Three choices:

  • Keep existing TTF hinting — preserves the font's original instructions.
  • Autohint — applies TTFAutohint to generate hinting.
  • Strip hinting — removes hinting instructions, typically reducing file size.

Hinting affects rendering quality at small sizes on some platforms; stripping is common for webfonts where file size matters more.

Demo page language

Choose the language of the generated demo page: Without demo page, English, French, Georgian, German, Portuguese, Russian, Spanish. The demo page shows the converted font in use, which helps you verify the result before deploying.

Subsets and Unicode ranges

You can restrict the generated font to specific character sets or Unicode ranges. Subsetting reduces file size by excluding glyphs your page won't use — for example, limiting a font to Latin characters when the site is English-only.

Font display

Sets the CSS font-display value: auto, block, swap, fallback, optional. This controls how text renders while the webfont loads — swap shows fallback text immediately and swaps in the webfont when ready, while block briefly hides text. Choose based on whether you prioritize immediate readable text or avoiding a flash of fallback styling.

Fonts directory and defaults

A Fonts directory field sets where font files are referenced, and Save as default / Reset lets you persist or clear your settings for future conversions.

What the output contains

After conversion, the zip archive includes the converted font files in your selected formats, the @font-face CSS, and the demo page (unless you chose "Without demo page"). The CSS uses the @font-face rule to load your fonts on a web page, removing dependence on fonts installed on visitors' computers.

Practical selection guidance

Goal Settings to consider
Smallest files for modern browsers WOFF2 only; strip hinting; subset to needed ranges
Broad legacy browser support Include WOFF, EOT, TTF, SVG as needed
Fewer HTTP requests Base64 encode (watch CSS size)
Consistent multi-weight family Family support + fix vertical metrics
Avoid layout shift on load font-display: swap or optional
Verify before deploying Keep the demo page in your language

Start with WOFF2 plus a subset matching your content, strip hinting unless you see rendering problems at small sizes, and set font-display according to how much you want to avoid invisible or swapping text.