Font Guides
OTF vs TTF vs WOFF vs WOFF2: Which Font File Should You Use?
Download almost any professional font and you will find a folder with OTF, TTF, WOFF and WOFF2 files inside. It is a common moment of confusion. Do you install all of them? Does one look better? Here is the short version, followed by the details.
The short answer
- For your computer (Canva, Photoshop, Figma, Illustrator, Word): install the OTF. If something goes wrong, use the TTF instead.
- For a website: upload the WOFF2. Keep the WOFF only if you need to support very old browsers.
- Never install every format at once on the same computer. Two copies of the same font can confuse your design apps.
OTF vs TTF: what is the difference?
Both OTF (OpenType) and TTF (TrueType) are desktop font formats, and both work on Windows and Mac. The real differences are technical:
- Curves: OTF files usually store letter shapes as cubic curves (the same kind used in design tools), while TTF files use quadratic curves. In practice, both look the same on screen.
- Features: both formats can carry OpenType features like ligatures, stylistic alternates and swashes. Font makers tend to put the full feature set in the OTF, which is why designers usually prefer it.
- Compatibility: TTF has been around longer and can behave better in a few older programs and some office or embroidery software.
So my rule is simple: install the OTF first. If a specific app refuses to show the font or its alternates, uninstall it and try the TTF.
Why special features matter
Script and handwritten fonts often hide their best parts in OpenType features. Guttery, for example, includes end alternates, ligatures and underline sets, and The Sidestream comes with graffiti-style swashes and alternates. To use them you need an app that supports OpenType features (like Illustrator, Photoshop, InDesign, Affinity or Figma) and, ideally, the OTF file.
WOFF and WOFF2: fonts for the web
WOFF stands for Web Open Font Format. It is basically a compressed wrapper around a font, designed to be downloaded by browsers. WOFF2 uses much better compression, so the file is noticeably smaller and your page loads faster.
Every modern browser supports WOFF2, so for most websites today you only need WOFF2. Smaller font files help your Core Web Vitals and make text appear faster, especially on mobile data. If you want to go deeper, read our post on web fonts and website speed.
Do not install WOFF or WOFF2 on your computer for design work. They are meant for browsers.
What about variable fonts?
A variable font is a single file that contains a whole range of weights (and sometimes widths or slants). Instead of separate Light, Regular and Bold files, you get one file and choose any weight in between. Grift includes a variable version. We explain how to use it in variable fonts explained.
Quick reference table
| Format | Use it for | Notes |
|---|---|---|
| OTF | Desktop design apps | First choice for designers; usually has the full feature set |
| TTF | Desktop apps, older software | Use if OTF misbehaves in a specific program |
| WOFF2 | Websites | Smallest file, supported by all modern browsers |
| WOFF | Websites (legacy) | Only needed for very old browsers |
Which formats come with our fonts?
Common questions from buyers
"Will the OTF look different from the TTF?" No. On screen and in print, the letters are the same design. "Can I upload the OTF to Canva?" Yes, Canva Pro and Teams accept OTF and TTF uploads in the Brand Kit, as long as your licence covers that use. "Why does my website still load slowly?" Check that you are serving WOFF2 and only loading the weights you actually use.
Once you know which file goes where, fonts stop being confusing. Install OTF on your computer, upload WOFF2 to your website, and keep the rest of the folder as a backup.
Each product page lists the included formats in the details table. Many of our fonts, like iBrand and Squid Boy, ship with OTF, TTF, WOFF and WOFF2, so you are covered for both design work and websites. Browse the full font collection to compare.