OTF vs TTF vs WOFF2
Last updated
Install OTF or TTF on your computer, and use WOFF2 on your website. OTF and TTF both work in every current design app on Mac and Windows; the real difference is the kind of curves stored inside. WOFF2 is the same font compressed for browsers, and it isn’t meant to be installed.
Font file types at a glance
| Format | What’s inside | Use it for | Install on a computer | Use on a website |
|---|---|---|---|---|
| OTF | OpenType, usually with CFF (PostScript style) outlines | Design and print apps, logos, packaging | Yes | Works, but heavy. Use WOFF2 |
| TTF | TrueType outlines | Office apps, game engines, app builds, older software | Yes | Works, but heavy. Use WOFF2 |
| WOFF2 | OpenType or TrueType data, compressed | Websites, through @font-face | No | Yes, in every current browser |
OTF: OpenType fonts
OpenType is the standard font format on Mac and Windows. A file ending in .otf usually stores its outlines as CFF, the PostScript way of drawing curves with cubic Bézier segments. Those are the same curves you push around in vector design apps, which is why type designers often build in them.
OpenType is also where the clever stuff lives: ligatures, alternate letters, small caps, old style numbers. People sometimes think that’s what separates OTF from TTF, but a TTF can carry the same features. Whether you get them depends on the font, not the file extension.
OpenType can technically hold TrueType outlines too, so an .otf isn’t always CFF inside. For installing and using a font, it makes no difference.
TTF: TrueType fonts
TrueType is older, and it draws curves with quadratic segments, which take a few more points to describe the same shape. It has a long history with screen rendering on Windows, and it’s the format almost every piece of software accepts without complaint.
That’s its main advantage now. Office suites, game engines, app frameworks, embroidery and cutting machine software, and older programs tend to want TTF. When you don’t know what something accepts, TTF is the safe bet.
WOFF2: the web font format
WOFF2 is the Web Open Font Format, version 2. It takes the font data from an OpenType or TrueType file and compresses it, so pages load faster. The file is usually a lot smaller than the OTF or TTF it came from. Every current browser supports it, which makes it the only web font format most sites need.
Upload the file to your own server and point your CSS at it:
@font-face {
font-family: "Your Font";
src: url("/fonts/YourFont-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}Add one block per weight or style you use, and only load the styles the site actually needs. Each one is a separate download. Serving a font on a website needs a web license, which is a different thing from the license that covers your computer. The font licenses guide explains why.
Which font file format should you use?
- Designing logos, print, packaging or merch in desktop design apps: OTF.
- Documents, slides, games and apps, or software you’re not sure about: TTF.
- A website: WOFF2, served with @font-face.
Got all three in a download? Install one of OTF or TTF on your computer, keep the WOFF2 for the web, and leave the rest in the folder.
How to install a font on Mac and Windows
Mac
Double-click the .otf or .ttf file. Font Book opens and shows a preview. Click Install. To install a whole family at once, select all the files and drag them into the Font Book window. Quit and reopen any app that was already running so it picks up the new font.
Windows
Right-click the .otf or .ttf file and choose Install. Choose Install for all users if other accounts on the computer need it too. You can also drag the files onto the Fonts page in Settings, under Personalization. Restart open apps afterwards.
iPhone and iPad
Most iPhone apps can’t install fonts directly. Use an app that supports custom fonts, and add the font inside it.
Websites
You don’t install anything. Upload the WOFF2 to your server and load it with @font-face, as above.
For Android, design apps and fonts that won’t show up, see how to install fonts.
What you get from Letterhead
Fonts in the Letterhead shop come with every style in OTF, TTF and WOFF2. A Desktop license covers the OTF and TTF on your computers, and a Web license covers the WOFF2 on your sites. The details are in the font license.
Fonts you make in the editor download as OTF on the Free plan, for personal use. Paid plans add TTF and WOFF2 and let you sell what you make. If you haven’t made one yet, start with how to make your own font.
Questions people ask
- Is OTF better than TTF?
- Not in any way you'll notice in most work. Both are OpenType fonts, both carry ligatures and alternates, both work in every current design app on Mac and Windows. Pick OTF for print and design apps, TTF for office software, game engines and anything older or pickier.
- Should I install both the OTF and the TTF?
- No. Install one or the other. Two copies of the same font with the same name confuse apps, and you can end up with the wrong one in a document without knowing.
- Can I install a WOFF2 file on my computer?
- No. WOFF2 is packed for browsers to download, and Mac and Windows won't install it as a desktop font. Use the OTF or TTF on your computer and the WOFF2 on your website.
- Can I convert a TTF to WOFF2 myself?
- Technically yes, but check your license first. Many font licenses, including Letterhead's, don't allow converting the files and then sharing the result, and a web license is usually a separate purchase. Fonts from the Letterhead shop come with WOFF2 files already made.
- Do I still need WOFF or TTF on my website?
- Not for current browsers. Every current browser supports WOFF2. Older WOFF or TTF fallbacks only matter if you have to support browsers that are many years out of date.