TTF vs OTF vs WOFF2: Font Format Comparison
A Quick History of These Three Formats
TrueType (TTF) emerged in 1989 from a joint effort between Apple and Microsoft. Their goal was to give operating systems direct control over font rendering, cutting out their reliance on Adobe's PostScript licensing. A TTF file stores glyph outlines as quadratic Bézier curves and bundles everything—metrics, hinting instructions, kerning tables—into a single binary. For the better part of the 90s, it was the undisputed king of desktop fonts on both Windows and macOS. Then came OpenType (OTF) in 1996, developed by Microsoft and soon joined by Adobe. Instead of starting from scratch, OpenType cleverly extended the TrueType container. An OTF file can use either TrueType's quadratic curves or Adobe's cubic PostScript curves (CFF outlines), which is why you see the term 'CFF-based OTF.' More importantly, the format introduced a powerful set of layout tables—GSUB and GPOS—that unlock features like ligatures, small caps, swashes, and contextual alternates. A sophisticated OTF for a complex script like Arabic can contain thousands of glyph substitution rules. WOFF2 (Web Open Font Format 2) plays a completely different game. Ratified as a W3C Recommendation in 2018, it’s not a new outline format but a hyper-efficient compression wrapper. It takes an existing TTF or OTF, applies Brotli compression and a special font-aware pre-processing step, and spits out a file that’s often 30–50% smaller. WOFF2 was built exclusively for web delivery. Browsers decompress it on the fly, so it never even sees your OS font manager. Grasping this distinction—outline format versus delivery format—is the key to understanding how to use them.
File Size and Compression: The Numbers That Actually Matter
Raw file size hits you where it hurts: page load times, app bundle sizes, and CDN bandwidth costs. Let's look at some concrete numbers. A moderately complex Latin typeface like Source Sans Pro Regular weighs about 260 KB as a TTF. The OTF version, using more efficient CFF outlines, is around 155 KB. That's because CFF's cubic curves can often describe shapes with fewer points than TrueType's quadratic curves, leading to CFF-based OTFs being 20–40% smaller for Latin scripts. Now, convert that same font to WOFF2 and you get a file of roughly 75 KB. That's a massive 71% reduction from the original TTF. With a CJK (Chinese, Japanese, Korean) font, the story changes. A full-coverage CJK TTF like Noto Sans CJK SC can balloon to over 20 MB. WOFF2 compression helps, maybe bringing it down to 13–15 MB, but it's not a silver bullet. The real solution for huge fonts is subsetting, which is a separate process from simple format conversion. WOFF2 alone will not rescue a font with 65,000 glyphs. As for WOFF (version 1), it's basically a museum piece. It used zlib compression and has been totally superseded by WOFF2. According to caniuse.com, WOFF2 support hit 97%+ of global users back in 2024, covering every modern browser you care about. The only holdouts are ancient embedded browsers or kiosks still running Internet Explorer 11. For any new web project, WOFF2 isn't just the best choice; it's the only sensible one.
OpenType Features: Where OTF Genuinely Outperforms TTF
The most important technical difference between a good OTF and a TTF is access to advanced OpenType layout features. While both file types can technically contain the necessary GSUB (Glyph Substitution) and GPOS (Glyph Positioning) tables, professional type foundries almost exclusively build their rich feature sets into their OTF releases. In the real world, the good stuff is in the OTF. What do these features actually do? Ligatures replace common sequences like 'fi' and 'fl' with a single, perfectly crafted glyph, preventing collisions. Discretionary ligatures go further, artfully combining pairs like 'ct' or 'Th' for a calligraphic flair. Small caps substitute full-height capitals with optically sized smaller versions—these are redrawn glyphs, not just scaled-down letters. Oldstyle figures give you numerals with ascenders and descenders, allowing them to blend beautifully into a line of text. A single OTF file for a typeface like Minion Pro might contain over 1,700 glyphs and dozens of these features, tagged as 'onum,' 'smcp,' 'calt,' 'swsh,' and 'hist.' In CSS, you enable them with `font-feature-settings: 'onum' 1;` or `font-variant-numeric: oldstyle-nums;`. In Adobe InDesign, you'll find them under Type > OpenType. Even Microsoft Word 365 has some support in the advanced font dialog, though it’s less comprehensive than Adobe’s tools. A TTF file without these tables offers none of this, no matter the application. If your design relies on proper small caps, contextual alternates, or the complex shaping required for scripts like Arabic or Devanagari, OTF is not just a preference. It's a requirement.
Hinting and Rendering: Desktop vs. Screen Contexts
Font hinting is a set of instructions inside a font file that adjusts glyph outlines to make them look sharp at small sizes on screens. Anyone who's squinted at blurry 12px text knows the pain of bad rendering; hinting is the cure. Without it, the vertical stem of a lowercase 'n' might be one pixel wide while the other is two, creating an ugly, uneven look. Good hinting aligns those strokes to the pixel grid. TTF fonts are famous for their manual TrueType hinting, a complex bytecode language that gives designers granular control over every pixel. This is brutally labor-intensive work—a fully hand-hinted font like Arial represents hundreds of hours. The payoff was huge on older Windows systems using the GDI renderer. CFF-based OTF fonts use simpler PostScript hinting. On macOS, which has long used a renderer that largely ignores hinting, this difference is moot. On Windows, the ClearType renderer (default since Vista) has narrowed the gap considerably. And on high-DPI displays—basically any modern phone or "Retina" screen—hinting becomes almost irrelevant. The pixels are simply too small for those grid-alignment problems to appear. WOFF2 doesn't change the hinting story; it just preserves the hinting data from the original font it compressed. If you convert a well-hinted TTF, those hints come along for the ride. The practical takeaway? If your primary users are on non-HD Windows monitors and you're displaying text under 16px, a hand-hinted TTF still has a visible edge. For web use on modern hardware, the difference is almost impossible to spot.
When to Use Each Format: A Practical Decision Guide
For desktop installation—in your OS, design apps, or office suite—you need either TTF or OTF. Both Windows and macOS support both natively, as do Linux distros. The decision comes down to your needs. If you're a designer who needs ligatures, swashes, and other advanced typographic features in InDesign, you want the OTF. If you're an IT admin deploying a corporate font across a fleet of Windows machines, a hinted TTF is often the safer, more compatible choice. Web delivery is simple: WOFF2. End of story. Your CSS `@font-face` declaration should always list WOFF2 first: `src: url('font.woff2') format('woff2'), url('font.woff') format('woff');`. Serving a raw TTF or OTF file over the web is a performance crime. You're forcing users to download 2-3x more data than necessary. If you see a legacy theme referencing a .ttf in its stylesheet, swapping it for a WOFF2 is a quick and easy performance win. Mobile apps are a different context. Both iOS and Android natively use TTF and OTF files bundled inside the app package; neither uses WOFF2 for this purpose, as it's a browser-only delivery format. Flutter apps bundle TTF or OTF in the assets directory and declare them in `pubspec.yaml`, and React Native follows a similar pattern. Game engines have their own preferences. Unity's TextMeshPro works with OTF and TTF to generate its font assets. Unreal Engine's importer prefers TTF. Neither will import a WOFF2 file directly, so if that's all you have, you'll need to convert it back to TTF or OTF first.
Converting Between Formats with CocoConvert
Need to switch between these formats? CocoConvert handles the most critical conversion paths: TTF to WOFF2, OTF to WOFF2, WOFF2 to TTF, and even OTF to TTF. Our process is powered by `fonttools`, the same industry-standard Python library used by Google Fonts. This ensures your converted files are standards-compliant and that OpenType tables like GSUB, GPOS, name records, and hinting data are preserved. To create a web-ready font, just upload your .ttf file on our font conversion page, pick WOFF2 as the output, and click Convert. A typical Latin font is processed in seconds. The resulting WOFF2 file keeps all the original's metrics and layout features, with nothing stripped by default. Of course, CocoConvert doesn't do everything. It does not perform subsetting. If you convert a 20 MB CJK font, you'll get a compressed 13 MB WOFF2, not a lean 50 KB file containing only the characters you need. For that, you'll want a dedicated tool like `pyftsubset`. CocoConvert also does not alter licensing metadata. If a font's embedding flag (fsType) restricts it from web use, that flag remains in the converted file. Remember: converting a font doesn't change its license. If you don't have the rights to use a font on the web, converting it to WOFF2 won't make it legal. Converting WOFF2 back to TTF is incredibly useful when you find a web font and need to install it for desktop use. The decompression is lossless, meaning the resulting TTF has outline data that is byte-for-byte identical to the original source. The conversion cleanly reverses any WOFF2-specific optimizations, giving you a perfectly usable desktop file.
Summary: Choosing the Right Format Without Overthinking It
Let's cut through the noise. These three formats aren't interchangeable alternatives. They are different tools for different jobs. TTF is the universal adapter. Every platform that deals with fonts can handle TTF. It’s the right call when you need maximum compatibility, are targeting old Windows environments where its specific hinting shines, or when a tool like a game engine demands it. Its primary weakness is a larger file size compared to CFF-based OTFs and a typical lack of advanced typographic features. OTF is the professional's choice for desktop work. When a type foundry sells a font for serious design, the OTF is the version you want. It contains the complete OpenType feature set, its CFF outlines are compact, and every modern design app supports it. Its only real drawback is that it's too bloated for web delivery. Serving a raw OTF over HTTP is a waste of bandwidth. WOFF2 is for one thing and one thing only: the web. It's not a new kind of font, just an existing font brilliantly compressed for browsers. Use WOFF2 in your `@font-face` rules. Always. Keep the original TTF or OTF as your source file, but treat the WOFF2 as a disposable, optimized asset for delivery. Here’s the simple workflow for any new project: get a quality OTF font from a foundry. Use CocoConvert to create a WOFF2 version for your website. Keep the original OTF for any print or design work. And if you ever find yourself with only a WOFF2 file and need it on your desktop, convert it back to TTF. It’s that straightforward.