TTF vs OTF vs WOFF: Which Font Format to Install or Put on the Web

TrueType is the oldest of the four. Apple shipped it with System 7 in 1991 and Microsoft adopted it for Windows 3.1 the following year. A TrueType font describes every letter with quadratic curves, which have one control point per curved segment and were cheap to draw on early hardware. It also carries hinting: small programs inside the font that nudge stems and curves onto the pixel grid, so text stays crisp on low-resolution screens. The .ttf extension still marks fonts with these quadratic outlines.

OpenType, announced by Microsoft and Adobe in 1996, is a wrapper rather than a new kind of outline. It can hold TrueType outlines or PostScript outlines stored in a CFF table, which use cubic curves with two control points per segment. Around those outlines it adds layout tables for advanced typography: standard and discretionary ligatures, small caps, old-style figures, stylistic sets, contextual alternates and kerning. By convention a CFF-based OpenType font is saved as .otf, while an OpenType font with TrueType outlines keeps the .ttf extension.

WOFF and WOFF2 are wrappers built for the web. WOFF was drafted in 2009 and became a W3C Recommendation in 2012; it compresses each font table with zlib. WOFF2 became a W3C Recommendation in 2018, switched to Brotli and preprocesses glyph data first, which typically makes it about 30% smaller than WOFF. Three side formats complete the picture. EOT was Internet Explorer's own web format, SVG fonts were an early Safari-only stopgap, and variable fonts, added in OpenType 1.8 in 2016, pack a whole range of weights or widths into one file.

Install TTF or OTF and stop worrying about which one. Windows 10 and 11 install both with a right-click and Install, macOS opens both in Font Book, and Linux desktops pick them up from ~/.local/share/fonts once the font cache refreshes. Word, Photoshop, Figma's desktop app, Affinity and LibreOffice all read both. If a designer sends you the same family in both flavors, the OTF is usually the version the type designer drew in, and the TTF is a conversion made for older software.

The cases where the difference matters are narrow. Some cutting-machine and embroidery programs, game engines and microcontroller display libraries only understand TrueType outlines, so a CFF-based OTF looks broken there and needs converting OTF to TTF. In the other direction, nothing on a desktop installs WOFF or WOFF2 directly: those files are packed for browsers. Install only one version of a family, because a TTF and an OTF with the same internal name confuse font menus and apps may pick the wrong one.

Every current version of Chrome, Edge, Firefox and Safari reads WOFF2, so it should be the first and often the only source in your @font-face rule. Add a WOFF line after it only if your analytics still show browsers from before roughly 2016, such as old Android WebViews or embedded TV browsers. A browser walks the src list in order and downloads the first format it supports, which means the fallback costs modern visitors nothing. If you already have the desktop TrueType file, TTF to WOFF produces that fallback in one pass.

Avoid serving raw TTF or OTF on a site unless a platform forces you to, as some email builders and older content systems do. Browsers render them fine, but the files travel uncompressed unless your server gzips fonts, and they hand anyone a ready-to-install desktop copy. The font-display: swap line below tells the browser to show text in a fallback font immediately and swap in your font once it arrives, instead of hiding text for up to 3 seconds while it waits.

Host the files on your own domain where you can. Chrome, Safari and Firefox now partition their caches by site, so a font fetched from a shared CDN is no longer reused across websites, and self-hosting saves a DNS lookup and connection. Add <link rel="preload"> only for the one or two weights used above the fold; preloading every style competes with your images for bandwidth.

A single Latin text weight saved as WOFF2 typically weighs 20–60 KB. The same font as an uncompressed TTF is often two to three times larger, and a family that also covers Greek, Cyrillic and Vietnamese can pass 200 KB per style. Chinese, Japanese and Korean fonts are another scale entirely: a full CJK weight holds tens of thousands of glyphs and usually runs to several megabytes even after WOFF2 compression, which is far too much to load before a page can show its text.

Subsetting removes the characters a page never uses, and unicode-range tells the browser which characters a file covers, so it downloads that file only when the page actually contains them. Google Fonts uses exactly this for CJK, cutting each family into many small slices that load on demand. For your own fonts, the Keep characters option in the font converter trims a file to Latin + accents or Only characters I type before it reaches your server; keep All characters for anything you install on a computer.

TTF to OTF and back is a container change for TrueType-flavored fonts: the outline table, metrics and layout features move across untouched. The interesting case is a CFF-based OTF going to TTF. Cubic curves cannot be copied into a quadratic outline format, so each curve is re-drawn as one or more quadratic segments within a tolerance far smaller than a pixel. The PostScript hints cannot be translated either, which is why the OTF to TTF tool offers Hinting as Keep, Remove or Auto-hint.

Going from web back to desktop is the most common conversion. You download a theme or a design kit, find only .woff or .woff2 files, and need the font in Word or Figma. WOFF to TTF strips the compression and writes the original tables back out, so glyphs, kerning and features come out the same as went in. What you cannot recover is anything the web version had already dropped, such as characters removed by subsetting or hints stripped to save bytes.

Most conversion problems trace back to three things: hinting, layout features and variable axes. The list below covers the symptoms you are likely to notice after converting and the usual cause behind each one.

A font file is a small database, and three parts of it answer most questions. The name table holds the family name, style name, version, copyright line and often a license URL; macOS Font Book shows it under the info view, and the Windows font preview shows the first lines. Glyph coverage tells you which languages the font can set: a Latin-only font silently falls back to another typeface for Polish, Turkish or Vietnamese characters it lacks. For a variable font, the fvar table lists its axes, such as weight from 100 to 900 or width from 75 to 125.

Licensing is worth one look before anything goes online. Commercial foundries often sell separate desktop, web and app licenses, and a desktop license usually covers installing on a set number of computers but not serving the file to website visitors or bundling it in a mobile app. Converting a font changes its file format, never its license, so a WOFF2 made from a desktop TTF carries the same terms as the TTF. Fonts under the SIL Open Font License, which covers most of Google Fonts, may be converted, subset and self-hosted.

Most font questions reduce to where the file will live. If it is installed on a computer or packaged in an app, use TrueType or OpenType; if a browser downloads it, use the compressed web wrappers. The table maps common jobs to the format to pick and the conversion that gets you there, so you can skip the history and go straight to the file you need.

Two jobs sit between the categories. EPUB 3 accepts TTF, OTF and WOFF, so ebooks can use either family of formats, and SVG font files belong to the same lineage as vector graphics but today matter mainly to some plotter and engraving software rather than to browsers.