The short answer is simple: use OTF or TTF for installing a font in design software, and use WOFF2 for serving it on a website. But modern fonts can also contain variable axes, layered vectors, gradients, photographs and bitmap textures. This guide explains modern font formats including OpenType-SVG, bitmap colour fonts and webfonts.
I design and license my own typefaces, so I build these files and field the licensing questions that follow them. What follows is the practical version.
Which font format should you use?
Choose the format by what you are doing with it:
| Use | Best starting point | What to check |
|---|---|---|
| Photoshop, Illustrator and print design | OTF or TTF | Software compatibility and the features included in that particular font |
| A modern website | WOFF2 | Your webfont licence and the weights or characters the site actually needs |
| Older web-browser support | WOFF as a fallback | Whether the project genuinely needs the extra file |
| Adjustable weight or width | Variable OpenType font | Available axes and application or browser support |
| Full-colour textured lettering in Photoshop | OpenType-SVG | Whether the glyph artwork is vector, bitmap or a mixture, plus software support |
| Scalable colour text or interface typography | COLR/CPAL | Which COLR version is used and whether the target software supports it |
| Colour emoji or size-specific bitmap artwork | CBDT/CBLC or sbix | Platform support and the bitmap sizes built into the font |
If a font supplier includes several versions, do not install everything. Start with the format recommended for your software and project.
What does a font format actually describe?
A font file is a container. It can hold glyph outlines, spacing, character mapping, kerning, alternate letters, language support and other instructions used to lay out text. Modern OpenType files can also contain colour layers, SVG documents or bitmap images.
This is why the extension does not tell the entire story. Two files ending in .otf can contain very different kinds of glyph artwork and features. Microsoft’s OpenType specification describes a table-based format that can contain TrueType or CFF outlines, colour bitmaps, SVG documents and other glyph descriptions.
What is an OTF font?
OTF means OpenType Font. In everyday design work, an .otf file is normally an installable desktop font used in applications such as Photoshop, Illustrator, InDesign and Affinity Designer.
OTF files commonly use CFF or CFF2 outlines, although OpenType technology is broader than the extension suggests. They may include ligatures, contextual alternates, stylistic sets, small caps and different numeral styles—but those features are included by the type designer, not bestowed by the letters O, T and F.
What is a TTF font?
TTF means TrueType Font. A modern .ttf file can also be an OpenType font, generally using TrueType-style outlines. It can contain the same kinds of OpenType Layout features as an OTF file, including alternates and ligatures.
That corrects a common oversimplification: OTF is not automatically more professional, more detailed or more feature-rich than TTF. The actual font build, its outlines, hinting, features and target software matter more than the extension.
Should you install OTF or TTF?
Install the OTF unless the foundry tells you otherwise. It is the sensible default for contemporary design and print software when both versions are supplied and no special instruction is given. TTF can be useful when a particular application, operating system or production workflow expects it.
- Do not install both versions under the same family name. Duplicate fonts can create confusing menus and conflicts.
- Check the supplied instructions. A foundry may have built the versions for different purposes.
- Test the application that matters. A font working in one program does not prove that every program supports every feature.
What are WOFF and WOFF2 fonts?
WOFF and WOFF2 are packages made for delivering fonts to web pages through CSS. They are not the files most people should double-click and install for desktop design.
WOFF2 uses more efficient compression than WOFF and is the normal first choice for a modern website. The W3C WOFF2 specification describes it as an efficient way to package fonts referenced by CSS @font-face rules. WOFF can remain as a fallback where older browser support is genuinely required.
@font-face {
font-family: "Example Font";
src: url("/fonts/example-font.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}Use the smallest useful set of webfont files rather than loading six weights because someone might feel energetic later. Subsetting and sensible weight selection can reduce downloads, but only create subsets when the licence permits it and the required characters and OpenType behaviour have been tested.
What is a variable font?
A variable font stores a range of related designs within one OpenType font resource. Instead of separate Regular, Medium and Bold files, one font might provide a continuous weight axis. Other axes can control width, slant, optical size or something designed specifically for that typeface.
A variable font is not identified by one universal filename extension. It may be delivered as TTF, OTF or WOFF2 depending on its outlines and intended use. Read Variable Fonts vs Static Fonts for the practical differences and the situations where several ordinary static fonts are still the cleaner answer.
What is an OpenType-SVG colour font?
An OpenType-SVG font contains SVG descriptions for some or all of its glyphs inside an OpenType file. This allows a character to arrive with multiple colours, gradients, transparency and detailed artwork while remaining editable text in software that supports it.
It may still end in .otf. OpenType-SVG describes what is inside the font, not a separate filename extension. The official OpenType SVG-table specification also requires a conventional outline description for every SVG glyph, providing a fallback when the richer artwork cannot be rendered.
Support is more important than the extension. Photoshop and Illustrator can display OpenType-SVG fonts, but another application may show only the fallback outline. See OpenType SVG vs Regular Fonts in Photoshop before choosing one for a workflow involving several programs.
What is an OpenType-SVG bitmap font?
OpenType-SVG bitmap font is a useful description rather than a separate official extension. The SVG table can contain vector artwork, raster artwork or a combination of both. That means a glyph can preserve hand-painted strokes, ink texture or photographic detail that ordinary outlines would flatten or simplify.
This matters because “SVG” does not guarantee that every part of the character is infinitely scalable. If the artwork embedded in the SVG glyph is bitmap-based, enlarging it far beyond its intended resolution may reveal softness or pixels. It may also produce a larger font file. The reward is much richer surface detail—ideal for expressive display lettering, less ideal for the small print on a tax return.
What are COLR and CPAL colour fonts?
COLR and CPAL are OpenType tables for colour glyphs. COLR describes how glyph elements are composed; CPAL supplies colour palettes.
- COLR version 0 builds glyphs from layered outlines with solid colours.
- COLR version 1 adds richer paint operations including gradients and more complex compositions.
Because COLR uses outline-based components, it can remain scalable and can work with variable-font technology. It is an elegant choice for many modern interface, emoji and display-font uses, but the target browsers and applications still need to support the relevant version. The OpenType COLR specification explains the two versions and their rendering model.
What are CBDT/CBLC and sbix bitmap fonts?
These formats place colour bitmap imagery inside an OpenType font:
- CBDT/CBLC stores colour bitmap glyph data and information locating the available bitmap sizes. The glyph images can be stored as PNG data.
- sbix stores bitmap glyph graphics in familiar formats including PNG, JPEG or TIFF, potentially with different versions for different pixel sizes.
They are particularly associated with colour emoji and platform fonts. Unlike outline-based colour formats, their artwork is tied to pixel data, so rendering depends on the available bitmap strikes and how the application scales them. They are modern and useful, but not automatically the best delivery format for a decorative retail font simply because they contain colour.
What are TTC and OTC font collections?
TTC and OTC files package multiple font resources together and can share common data between them. They are especially useful for large related families or fonts supporting substantial character sets.
Designers will encounter them less often than OTF or TTF. Treat a collection as a supplied unit unless the licence and production workflow explicitly allow it to be separated or converted.
Which older font formats should you recognise?
- PostScript Type 1 was once central to professional publishing but is now a legacy format for most current workflows.
- EOT was an early webfont format associated with older versions of Internet Explorer.
- The old SVG webfont format is not the same thing as OpenType-SVG. One was a standalone webfont approach; the other is SVG artwork stored inside an OpenType font.
- DFONT is an older macOS suitcase-style font format and is not a normal choice for new commercial releases.
Keep old files when maintaining an archive, but do not choose a legacy format for a new project merely because it survived three office moves.
Are Glyphs, UFO and designspace files fonts?
Files such as .glyphs, .glyphspackage, .ufo and .designspace are source or production formats used to design and generate fonts. They are not normal end-user files for installing in Photoshop or uploading to a website.
Source delivery also has licensing and ownership implications. If you are commissioning a typeface, the article What Files Should a Custom Typeface Include? explains how to agree final fonts, source files and documentation.
Does converting a font change its licence?
No. Converting OTF to WOFF2 does not create a webfont licence. Renaming a file does not grant new rights either—and simply changing .otf to .woff2 does not perform a valid conversion.
Before embedding, converting, subsetting or sharing a font, check its actual licence. The technical ability to do something and permission to do it are two separate departments. They rarely share a kettle.
If you are not sure what your own licence covers, What Font Licence Do I Need for Social Media and Paid Ads? deals with campaign and social use, and Can I Use Any Font for a Logo? deals with logos and trademarks.
Frequently asked questions about font formats
Is OTF better than TTF?
No. Both can be modern OpenType fonts and both can include advanced typography, so neither extension is inherently the higher-quality one. Choose according to the font’s construction, the supplier’s recommendation and the software in which it must work.
Can I install a WOFF2 font on my computer?
WOFF2 is intended for web delivery. Use the supplied OTF or TTF desktop version for design applications rather than converting or installing the webfont.
Can an OpenType-SVG font contain bitmap images?
Yes. OpenType’s SVG table can contain raster artwork, vector artwork or both. Bitmap-based glyph artwork can preserve rich texture but may have practical resolution and file-size limits.
Are all colour fonts OpenType-SVG?
No. OpenType supports several colour approaches, including SVG, COLR/CPAL, CBDT/CBLC and sbix. They store and render artwork differently.
Is a variable font a different format from OTF or TTF?
It is an OpenType technology rather than one universal extension. Variable fonts may be packaged for desktop or web use in formats such as TTF, OTF and WOFF2.
Which format should I use on a website?
WOFF2 is the sensible default for modern browsers. Add WOFF only when the required browser support justifies it, and make sure the licence covers web embedding.
Choose by use, then test
For most designers the decision is pleasantly unglamorous: OTF or TTF on the desktop, WOFF2 on the web. Variable and colour fonts add far more expressive possibilities, but they also make software support, file size and testing more important.
Choose the format that suits the real output, install only what you need and test it where the work will actually appear. Then you can return to the difficult part: choosing the typeface. If the texture is the point, my OpenType-SVG fonts keep the kind of hand-painted detail described above; the rest are in handmade display fonts.