Font Converter

The quick answer for most jobs: pick TTF or OTF when the font will be installed on a computer or used in an app, WOFF2 when it will be loaded by a web page, and WOFF only as a second source for browsers too old to read WOFF2. TTF and OTF files are not compressed, so they are noticeably heavier than the same font as WOFF2, which is why serving them on a website wastes bandwidth even though browsers can read them.

TrueType and OpenType are the font files your operating system installs. TrueType came from Apple around 1991; OpenType, created by Microsoft and Adobe later in the decade, extended it with richer typographic features and the choice of PostScript-style outlines. Microsoft keeps the OpenType specification online. A file ending in .otf usually carries those PostScript outlines, while .ttf carries TrueType outlines, but both can hold the same ligatures, kerning and alternate letters. Variable fonts, which store a whole range of weights or widths in a single file, use these same containers rather than a format of their own.

WOFF and WOFF2 are not new kinds of font. They take a TrueType or OpenType font and compress it for the trip to a browser: WOFF uses zlib, and WOFF2 uses Brotli plus some font-specific transforms that make it noticeably smaller. Browsers unpack the file in memory and use it exactly like the original. That is also why a WOFF2 can be turned back into a working TTF or OTF.

The remaining outputs are for older systems. EOT was Microsoft's web font format for old versions of Internet Explorer and is only worth making when such a browser is a real requirement. SVG fonts describe each letter as an SVG path; they were dropped from the web platform in most browsers but are still read by some older design and cutting software. On the input side, TTC collections, Mac .dfont suitcases and PostScript Type 1 files (PFB with PFM or AFM) are accepted, which helps rescue old fonts that current apps will no longer open.

Converting between TTF and OTF means changing the outline type as well. TrueType outlines are built from quadratic curves and PostScript outlines from cubic ones, so going from OTF to TTF approximates each curve with a few more points. The difference is invisible at normal sizes, but a type designer editing the result will notice extra points on the curves. Keep the original file if you plan to edit the letters themselves.

A web font needs two things: the file on your server and an @font-face rule that tells the browser where it is and which name to use. Switch on Include @font-face CSS and the tool writes that rule for you. The line below shows the shape of a standard rule, written to the CSS Fonts specification. Replace the family name and file name with your own.

The font-display: swap part tells the browser to show text in a fallback font right away and switch when the web font arrives, so the page never sits blank. Add one rule per weight and style, such as regular, italic and bold, each pointing to its own file, and give them the same family name so font-weight: 700 picks the bold file automatically.

Two smaller habits help the font arrive sooner. Serve the files from the same domain as the page, which avoids an extra connection, and preload only the one or two fonts used above the fold with a link rel="preload" as="font" tag that includes the crossorigin attribute; browsers fetch fonts in that mode even from your own site. Preloading every weight does the opposite of what you want, because it competes with images and scripts for the same bandwidth.

Many fonts ship with thousands of characters for dozens of languages, and a page in English uses only a small fraction of them. Keep characters trims the font to a set you choose: Basic Latin for English, Latin plus accents for most European languages, or Cyrillic, Greek or Vietnamese. Only characters I type keeps exactly what you enter, which suits a logo, a headline font or a set of icons. Smaller fonts download faster, which helps every visitor on a slow connection.

Subsetting has a cost if you guess wrong. Any character that is removed will be drawn from the fallback font instead, so a name with an accent or a pasted quotation in another language can look patched together. Keep Keep ligatures & kerning switched on so that letter pairs and joined forms still work in the characters you keep.

Hinting is extra instruction data that helps a font render crisply at small pixel sizes, mainly on Windows. Keep leaves it alone, Remove drops it for a lighter file, which is often fine on high-resolution screens and on macOS, and Auto-hint rebuilds it automatically. Family name and Style name let you rename the font, which avoids clashes when a converted copy is installed next to the original.

A typical web setup needs only one conversion: a desktop TTF or OTF goes in, a subset WOFF2 comes out, and the CSS file lists it. The TTF to WOFF2 page walks through that case. If you are sending a whole family to a developer or a print shop, pack the converted files and the CSS together with the Zip Files tool so nothing goes missing, and keep the original files as your master copies, since a subset font cannot be expanded again later. Other file jobs that are neither documents nor media live under more tools.