As a designer, you’ve probably encountered a whole alphabet soup of font file formats: .otf, .ttf, .woff, .woff2, .eot, .svg, and the increasingly popular .var. Especially if you’re new to the game (or been too afraid to ask), it can be complicated knowing what’s what, who’s who and what’s best. Not every creative is as deeply embedded in font production as we are, and it can be hard to keep track of what each one actually does.
So here’s a quick breakdown of the most common font formats, why they exist, and how to pick the right one for you!
OTF (.otf) – OpenType Font
OpenType is the most widely supported and feature-rich format for professional design use. It can handle advanced OpenType features like ligatures, stylistic alternates, small caps, and more, all in a single file. You’ll often use .otf files when installing fonts on your computer for use in design tools like Figma, Illustrator, or InDesign. OTF files are scalable and cross-platform, meaning they work well on both Mac and Windows.
Best for: print design, desktop use, and modern operating systems.
TTF (.ttf) –TrueType Font
TTF was developed by Apple and Microsoft in the late ’80s and is still widely used today. It doesn’t support quite as many OpenType features as .otf, but it’s more than good enough for most uses – especially on-screen text and UI. Some operating systems or older software might render .ttf fonts slightly better, especially at small sizes on screen.
Best for: older systems, legacy software, and high screen legibility.
WOFF / WOFF2 (.woff, .woff2) – Web Open Font Format
WOFF (and its smaller, faster sibling WOFF2) are compressed formats designed specifically for the web. They reduce file size for quicker loading without compromising the font’s visual quality.
WOFF2 is currently the most efficient font format for web use – so if you’re self-hosting fonts on a site, it should be your first choice. Most browsers support WOFF2, and fallback to WOFF if needed.
Best for: websites.
NOTE: Never use OTF or TTF files directly on the web. They’re not optimised for performance and can create licensing issues.
Variable Fonts – .ttf, .woff or .woff2 with variable settings
Variable fonts are a newer format introduced with OpenType 1.8 that allow a single file to contain multiple styles (like weights, widths, or optical sizes). Instead of installing multiple font files (e.g., Light, Regular, Bold), one variable font can do it all, with smooth transitions between settings.
They’re excellent for both web and UI design where performance matters. And from a creative perspective, they offer an unbelievable level of typographic control. More and more foundries – including Pangram Pangram – now include variable fonts in their full font packages.
Best for: flexibility, performance, and responsive design.
EOT (.eot) — Embedded OpenType
Unless you’re designing for a website that needs to support Internet Explorer 8 and below (…please don’t), EOT is obsolete. You’ll only encounter it when working on long-standing enterprise projects or archival systems.
Best for: legacy versions of Internet Explorer.
(In 2025? Almost never.)
SVG (.svg) – Scalable Vector Graphics
SVG fonts are used in some rare scenarios where you want to include multi-coloured or animated type on the web. They’re mostly replaced now by OpenType-SVG or COLRv1 fonts, which allow for more efficient colour glyph rendering
Best for: decorative or colour fonts, very specific web use
So… which one should you use?
Here’s a quick cheat sheet:
Use Case / Recommended Format
Print / desktop design: .otf
Web: .woff2 (fallback: .woff)
Legacy software: .ttf
Responsive / digital design systems: .ttf or .woff2
Full creative control: Variable font .ttf, .woff2 + static .otf
If you’re browsing Pangram Pangram’s collection, you’ll often find full font packages that include OTF, TTF, WOFF2, and Variable files, all ready to go. So you can design without worrying too much about file formats.
Need a full pack to experiment with?
Try our Font Starter Pack and start testing the formats yourself.
