transfonter.org

@font-face lets a web page load a font file from your server instead of relying on whatever fonts the visitor happens to have installed, so every visitor sees the same typography. Transfonter is an online generator that takes your font files, converts them into web formats such as WOFF and WOFF2, and hands back the CSS rules plus a demo page. Use it when you have a licensed font in a desktop format (TTF, OTF) and need browser-ready files and @font-face code without installing a build toolchain.

What @font-face actually changes

Without @font-face, a CSS font-family declaration can only name fonts the user already has. If the font is missing, the browser silently falls back to a default, and your design shifts. With @font-face, you declare a family name and point it at a file URL:

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff");
}
body { font-family: "MyFont", sans-serif; }

The browser downloads the file only when the family is actually used, then renders text with it. That is the whole mechanism: you supply the font, the browser fetches it.

A concrete case: a brand uses a custom typeface for headings. On a machine without that font installed, headings render in Arial and the layout looks wrong. Adding the @font-face rule with a converted WOFF2 file makes the headings consistent everywhere.

Why a generator is needed

Desktop font formats are not ideal for the web. TTF and OTF files are often larger than necessary, and older browsers expected formats like EOT or SVG. A generator solves two problems at once:

• Format conversion — produces compressed web formats (WOFF, WOFF2) that load faster and are broadly supported.
• CSS scaffolding — writes the @font-face rules, including src lists and format hints, so you don't hand-assemble them.

Transfonter's page describes exactly this: it converts fonts to CSS @font-face formats (WOFF, WOFF2) and returns CSS and HTML sample files. The output is a zip archive containing the converted fonts, the CSS styles, and a demo page.

What Transfonter accepts and produces

Based on the tool's own interface description:

The input list is wide because it covers TrueType/OpenType, PostScript Type 1 (PFA/PFB), and font-source formats like SFD. The output list is narrower and web-focused, which is the point.

Settings worth knowing before you convert

The interface exposes several conversion options. These matter because they affect file size, rendering, and CSS output:

• Family support and Add local rule — the local rule lets the browser use an installed copy of the font before downloading, which can skip the network request for some visitors.
• Fix vertical metrics — adjusts line-height behavior so text doesn't sit oddly in its line box.
• Base64 encode — embeds the font directly in the CSS instead of linking a file; useful for tiny fonts, costly for large ones.
• Hinting — keep existing hinting, run TTFAutohint, or strip it. Stripping reduces size; keeping it can improve rendering on some older rasterizers.
• Subsets — limit the font to specific characters or Unicode ranges, which is the single biggest size reduction for fonts covering many scripts.
• Font display — auto, block, swap, fallback, or optional, controlling what the browser shows while the font loads.
• Demo page language — English, French, Georgian, German, Portuguese, Russian, or Spanish.

How to convert a font, step by step

1. Confirm you have the right to embed the font. Web font licenses differ from desktop licenses; check before uploading.
2. Open the upload area and add your font files (drag and drop or browse). Stay within 5 MB per file and 20 files.
3. Choose output formats. WOFF2 plus WOFF covers modern browsers; add others only if you must support very old ones.
4. Set the options you need — subsets, font display, hinting, local rule.
5. Click Convert.
6. Download the zip archive containing converted fonts, CSS, and the demo page.
7. Verify by opening the demo page and checking that text renders in the intended typeface, then inspect the generated CSS and adjust the src URLs to match where you place the files on your server.

Common snags

• Fonts not appearing — usually a wrong file path in the generated CSS, or a missing format() hint.
• Flash of unstyled text — expected with font-display: swap; choose block or optional if you prefer different trade-offs.
• Large files — apply subsets and prefer WOFF2; base64 encoding makes the CSS itself large.
• Licensing — the tool converts whatever you upload, but permission to serve the font on the web is a separate matter.

Transfonter's own summary of the workflow is short: upload, convert, download the zip with converted fonts, CSS, and a demo page. The value is that @font-face, which removes dependence on the limited set of fonts users have installed, becomes a few clicks instead of a manual conversion and CSS-writing task.

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:

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.

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

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.

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

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.

Transfonter accepts 17 input font formats — including TTF, OTF, WOFF, WOFF2, SVG, TTC, DFONT, BIN, CFF, PFA, PFB, PS, PT3, SFD, T11 and T42 — and can output TTF, EOT, WOFF, WOFF2 and SVG. Each upload is limited to 5 MB per file and up to 20 files per conversion. The practical takeaway: you can drop in almost any desktop or web font file you have, and the tool will produce the web formats plus a CSS file and demo page.

Input formats: what you can upload

The upload area accepts the following extensions:

This range matters because older Type 1 fonts (PFA/PFB) and FontForge source files (SFD) are often rejected by simpler converters. If your font is a .ttc collection, note that Transfonter converts the file as uploaded — check the demo page to confirm the face you need is the one rendered.

Output formats: what you get back

Conversion settings include checkboxes for TTF, EOT, WOFF, WOFF2 and SVG. For modern web use, WOFF2 is the primary format and WOFF serves as the fallback; EOT exists only for legacy Internet Explorer. The result is delivered as a zip archive containing the converted font files, the generated @font-face CSS, and a demo page.

Limits and settings worth knowing

• Size and count: 5 MB per file, up to 20 files per run. Large CJK fonts or multi-weight families can hit the 5 MB ceiling, so split or subset them first.
• Subsets: the "Subsets" option lets you restrict output to specific Unicode ranges, which is the main way to shrink oversized fonts below practical web weights.
• Hinting: choose Keep existing TTF hinting, Autohint, or Strip hinting. Stripping reduces file size; autohinting can improve rendering on older Windows setups.
• Other options: Family support, Fix vertical metrics, Add local rule, Base64 encode, and Font display (auto, block, swap, fallback, optional).
• Demo page language: the generated demo page can be produced in English, French, Georgian, German, Portuguese, Russian or Spanish, or omitted entirely.

A quick verification step

After converting, open the included demo page before deploying. It renders sample text in the converted font, so you can confirm the correct face was extracted (especially from TTC or DFONT files) and that vertical metrics look right. If glyphs are missing, re-run with a broader subset or a different source file.