Download a font family today and you might find several files inside the folder:
Font-Regular.otf
Font-Regular.ttf
Font-Regular.woff
Font-Regular.woff2They may all appear to contain the same typeface, so why are there four versions?
A common explanation is that OTF is the modern professional format, TTF is an older format, and WOFF2 is simply the website version.
That explanation is convenient, but technically it leaves out much of what is actually happening.
Modern font formats are better understood as combinations of containers, tables, glyph outline technologies and compression methods. The letters you see are only one part of what is stored inside the file.
An OpenType font can contain character mappings, glyph outlines, kerning information, positioning rules, metadata, variable font data and many other structures. A WOFF2 file can then package much of that same OpenType information in a form designed for efficient delivery across the web.
So if you are choosing between OTF, TTF and WOFF2, the file extension alone does not tell the entire story.
What Is Actually Inside an OTF or TTF File?
To understand the formats, it helps to stop thinking of a font file as one large collection of letter drawings.
OpenType fonts are organised into a series of data structures called tables.
Microsoft’s official OpenType specification explains that an OpenType font contains data in table form. Different tables are responsible for different parts of the font.
Some common examples include:
cmapfor mapping characters to glyphsnamefor font names and related metadatahmtxfor horizontal metricsglyffor TrueType glyph outline dataGSUBfor glyph substitutionGPOSfor glyph positioningfvarfor variation axes in variable fonts
That means typing the letter A involves more than simply retrieving a picture of A from the file.
The software first needs to determine which glyph corresponds to the character. Depending on the language and OpenType features being used, substitution or positioning rules may then alter the selected glyph or its placement.
The glyph outline eventually provides the scalable shape that can be rasterized for the screen or printer.
This table-based architecture is one of the reasons modern font files can support features far beyond a basic alphabet.
A typeface might contain ligatures, alternative numerals, multiple language systems, contextual substitutions, small capitals or thousands of glyphs while still being represented as one font resource.
If you want to compare the visual side of these technologies, browse FontLark’s serif fonts and sans serif fonts. The file structure underneath them can be similar even when their letterforms look completely different.
The distinction between OTF and TTF becomes especially interesting here.
The Microsoft OpenType specification states that OpenType font files may use the extensions .OTF or .TTF. OpenType fonts containing TrueType outlines can use the .TTF extension, while fonts using Compact Font Format data use .OTF.[1]
So a TTF file is not necessarily some completely separate pre-OpenType technology.
Modern .ttf files can be OpenType fonts.
The important difference can instead be the type of outline data stored inside the OpenType structure.
TrueType outlines use quadratic Bézier curves. CFF-based OpenType fonts traditionally use cubic Bézier curves associated with PostScript-style outlines.
From an ordinary designer’s perspective, however, that mathematical distinction usually matters much less than people assume.
You generally should not expect a font to suddenly look more professional simply because its filename ends in .otf.
Why OTF Is Not Automatically Better Than TTF
There is a persistent piece of design advice that goes roughly like this:
If both files are available, always install OTF because OTF supports more advanced features.
That may have been a useful shortcut in some historical contexts, but it is not a reliable description of modern OpenType fonts.
Advanced typography is largely implemented through OpenType tables and features, not simply granted by the letters in the file extension.
For example, OpenType layout includes tables such as GSUB and GPOS.
GSUB can substitute one glyph for another or replace sequences of glyphs. This can support features such as ligatures and contextual alternatives.
GPOS handles precise glyph positioning and can contribute to kerning, mark positioning and complex-script layout.
A font using TrueType outlines can still contain OpenType layout functionality.
Microsoft’s specification explicitly describes required and optional OpenType tables independently from the simplistic OTF-versus-TTF distinction.[1]
This means two fonts with the same extension can also differ enormously.
One TTF might contain little more than a basic Latin character set.
Another TTF could contain extensive language support, sophisticated layout features and variable-font axes.
The extension does not tell you how ambitious the typeface is.
There can still be practical reasons to prefer one supplied format over another.
A font foundry may recommend a particular file. Older software may have compatibility requirements. Specific production workflows may favour one outline type. If the font creator explicitly documents which version should be used, following that guidance is sensible.
For ordinary desktop use, though, both current OTF and TTF fonts are widely supported.
MDN’s current documentation for CSS font sources even groups .otf and .ttf under OpenType-related web font handling and documents both as recognised font resources.[2]
So rather than asking, “Is OTF better than TTF?”, a better question is:
Which version does the font creator recommend for the software and environment where I intend to use it?
For logo design, print work and desktop applications, the supplied OTF or TTF version will usually be the relevant choice.
For a website, however, another format becomes much more interesting.
WOFF2 Is a Web Delivery Format, Not a Different Typeface
WOFF stands for Web Open Font Format.
WOFF2 is the newer version designed to make fonts more efficient to transfer across networks.
The important point is that WOFF2 does not represent an entirely new kind of letter outline in the same way that people sometimes imagine when comparing font formats.
It is fundamentally a packaging and compression format for font data used on the web.
The official W3C WOFF2 specification describes its primary purpose as efficiently packaging fonts linked to web documents through CSS @font-face rules.[3]
WOFF2 uses Brotli compression along with font-specific preprocessing designed to reduce redundancy in font data.
The W3C specification explains that this provides improved compression compared with WOFF 1.0, which used Flate compression.[3]
This matters because fonts can represent a significant part of a webpage’s download size.
Suppose a desktop OpenType font is several hundred kilobytes.
Serving the raw desktop font may work technically in some browsers, but transferring unnecessary bytes increases network cost and can delay when the desired typography becomes available.
WOFF2 is designed specifically for this environment.
A typical CSS declaration might look like this:
@font-face {
font-family: "Example Font";
src: url("/fonts/example-font.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}MDN documents @font-face as the CSS mechanism for loading a custom font from either a remote source or a locally installed font.[4]
It also lists the standard MIME types:
TTF font/ttf
OTF font/otf
WOFF font/woff
WOFF2 font/woff2WOFF2 also supports modern OpenType capabilities. The W3C states that WOFF2 supports the entirety of the TrueType and OpenType specifications, including variable fonts and colour fonts.[3]
That makes the idea that WOFF2 is a reduced or basic version of a desktop font misleading.
It is compressed for delivery, but it can still carry sophisticated font technology.
This is also why converting a font to WOFF2 does not magically grant permission to use it on a website.
File format and font licensing are separate issues.
A licence may allow desktop use while requiring a different licence for web embedding. Always check the terms associated with the original font before converting or hosting it.
If you are exploring typefaces for web projects, FontLark’s display fonts can be useful for headings, while monospace fonts are worth exploring for developer tools, code interfaces and technical designs.
Which Font Format Should You Actually Download?
The answer depends on what you are doing with the font.
For most desktop design applications, an OTF or TTF version supplied by the type designer is appropriate.
If both are provided and there are no special instructions, modern software can generally work with either. Do not assume that choosing OTF automatically unlocks better typography.
For a website, WOFF2 is normally the more appropriate delivery format.
The current W3C WOFF2 specification notes that WOFF2 is implemented in all major browsers and widely used on production websites.[3]
There is another important optimisation for websites: subsetting.
A font containing thousands of glyphs for many languages may be much larger than a website actually needs.
A subset removes unneeded glyphs and associated data so the browser downloads a smaller resource.
This has to be done carefully.
Removing characters that eventually appear on the page can create missing-glyph boxes or force the browser to fall back to another font.
You should also avoid assuming that simply converting an OTF file into WOFF2 represents a complete web-font optimisation strategy. Font weights, subsets, variable-font choices, preload behaviour and CSS loading decisions can all affect actual performance.
It helps to think of the main formats by purpose rather than by a ranking:
| Format | Typical role | What matters |
|---|---|---|
| TTF | Desktop fonts and general font installation | Often OpenType using TrueType outlines |
| OTF | Desktop and professional typography | Commonly associated with OpenType fonts using CFF outlines |
| WOFF | Older web font delivery | Compressed font packaging for browsers |
| WOFF2 | Modern web font delivery | Improved compression and broad modern browser support |
The most important distinction is therefore not simply:
OTF versus TTF versus WOFF2.
It is understanding what each format is doing within the font workflow.
OTF and TTF are commonly encountered as installable OpenType font resources. Their internal outline technology can differ, but both can support sophisticated OpenType functionality.
WOFF2 takes font data and packages it specifically for efficient transfer and use on the web.
None of these extensions tells you whether the typography itself is well drawn, whether the font contains the characters you need, or whether your licence permits the intended use.
The file extension is only one piece of information about the font.
The next time a font download gives you both OTF and TTF files, you therefore do not need to assume that one is the “premium” version.
And if you are building a website, installing the desktop file is only part of the story. Efficient web typography normally means serving an appropriately licensed and optimised web font, usually in WOFF2 format.
Browse fonts on FontLark or explore our serif, sans serif, display and monospace font collections to find typefaces for your next project.
Technical Sources
- Microsoft OpenType Specification: The OpenType Font File
Primary technical documentation for OpenType file structure, table organisation, OTF and TTF filename conventions, TrueType outlines and CFF data. - MDN: @font-face src Descriptor
Reference for recognised web font formats, including OpenType, TrueType, WOFF and WOFF2. - W3C: WOFF File Format 2.0
The W3C Recommendation defining WOFF2, its Brotli-based compression, structure, web use and support for OpenType technologies. - MDN: @font-face
Documentation covering downloadable web fonts, font sources and the MIME types associated with common font formats.
Technical note: Font formats and application support continue to evolve. The behaviour of a particular font can also depend on how it was produced, its internal tables, outline type, operating system, browser and design application.