TTF vs OTF vs WOFF2: Which Font File You Need and Where
If you have ever swapped fonts from desktop design to web delivery, you might think it's about TTF versus OTF. But the real decision is between format, delivery context, and licensing. TTF/OTF are the desktop canon. WOFF2 is a specialized web format.
In this article
The WOFF2 web font format was designed by the W3C for using fonts in web design. It can be referenced from CSS with an @font-face rule and packs the font for efficient delivery.
No matter which file you've downloaded, without a legal licence for web embedding, the font is useless on the web - even if you need a separate license to use the same font family on a website.
What TTF and OTF Actually Mean
TTF stands for TrueType Font. It originated at Apple and its further development involved Microsoft. OTF means OpenType Font, and it gained prominence since the late 1990s.
[TO VERIFY: A primary-source, standards-based statement distinguishing TrueType and OpenType as historical names over the same SFNT container, with exact wording from Apple, Microsoft, or the OpenType specification.]
So rather than being competing formats, they're related SFNT-based formats, with some differences in what technical metadata you get to play with.
They are not native web formats.
Why WOFF2 Is the Web Answer
The goal is a font that web users can interact with, delivered efficiently from servers. WOFF2 - introduced by the W3C - does not install on your personal computer.
Instead, it was developed for reference by CSS @font-face rules, typically using the MIME type font/woff2. It is efficient because it's compressed, which helps it work efficiently across web use-cases, especially on mobile devices(https://www.w3.org/Fonts/WG/WOFF2/Implementation.html).
Licensing Decides Legality
The same font you can legally use on your personal computer is not the same as the font you need for the web.
To licence web fonts, you may need a web-only licence. Different brands have different licence structures for desktop versus web use.
You may need to submit your site for review before the web font is approved for use. This is sometimes on a limited self-hosting basis. The requirements differ by font brand.
To illustrate, if you buy a desktop or local system-level licence for London Type's Mage TrueType font, you need to adhere to their web licensing terms, when hosting a web version. They offer licences for web hosting, too.
So you might have an OTF version available on your computer but you will need a licence to turn it into a WOFF2 file for a web page.
Variable Fonts and Collections
Variable fonts are an extension of standard font formats. They combine multiple visual variations into a single file.
This is particularly advantageous in performance settings, where many file downloads have to be grouped.
Computer to Web Conversion and Subsetting
Once you've got a suitable web licence, you can use a tool to quickly convert OTF files into WOFF2 (these may be bundled with the original font procured legally or a website hosting platform).
Formats can be converted by tools but make sure that you can re-package them yourself if they are demanding server-level support to your requirement criteria.
Some services actually offer tools too and treat the button as the licensing process, which also allows for subsetting, such as allowing just symbols of a language or weight-ranges of a variable font. But they may also modify metadata in ways that violate licenses.
Always check each font's licence requirements. Be in touch with anyone who has a pre-existing customer relationship.
How to Check What the Page Downloads
In the web setting, you see the fonts that are set. To examine or audit the actual file being used, you can check through Chrome DevTools, found in Developer Tools.
[TO VERIFY: A primary-source statement on checking what a page is downloading, such as browser developer tools or network inspection documentation from a browser vendor.]
From there, you can inspect typography, audit web properties, and check the metrics tab.
Conclusion
The take away is that, in the designing of a modern digital campaign, there are various facets to sustainable implementation and effective techniques can be repeated, such as gathering the licences and signing off, knowing which frameworks can slice a larger asset and what goes where alongside what it needs in the pipeline.
More in Files