font/otf OpenType Font Common

What it's for

font/otf identifies OpenType font files — a font format co-developed by Microsoft and Adobe that extended TrueType's underlying technology with support for more advanced typographic features (sophisticated ligatures, stylistic alternates, small caps, multiple writing systems within one font more robustly) and can use either TrueType-style or PostScript-style (Adobe's earlier format) glyph outlines internally. Like TTF, OTF is primarily a desktop/print/design font format rather than a web-delivery-optimized one — for actual web font serving, both TTF and OTF sources are typically converted to WOFF2.

Format & syntax

Content-Type: font/otf

Referenced in CSS via @font-face, generally as a source or fallback format:

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.otf") format("opentype");
}

No parameters. OTF files can internally use either TrueType outlines (the .otf extension is sometimes used even for TrueType-outline fonts with OpenType feature tables) or PostScript/CFF outlines, a distinction mostly invisible to end users but occasionally relevant for specific font tooling/processing workflows.

How it's used in practice

• Professional typography and design software — OTF's advanced typographic feature support (contextual alternates, sophisticated ligature sets, small caps, multiple numeral styles) makes it a common choice in professional design and publishing workflows where these features are actively used.
• Original font distribution and licensing format — similar to TTF, many fonts are originally released as OTF, later converted to WOFF2 for actual web delivery via font-conversion tooling.
• Variable font source files — modern variable font technology (a single font file supporting a continuous range of weights/styles) is commonly authored and distributed in OpenType format, which then gets converted to WOFF2 for efficient web delivery while retaining the variable font capability.
• Multi-script and complex writing system support — OTF's more sophisticated internal architecture handles complex script requirements (certain non-Latin writing systems with intricate contextual shaping rules) more robustly than classic TrueType, making it the more common choice for fonts targeting those scripts.

Common mistakes & gotchas

• Serving OTF directly for web delivery instead of WOFF2 — same core issue as TTF: OTF files are meaningfully larger than the WOFF2-converted equivalent for actual web serving, since WOFF2's compression is specifically optimized for that use case.
• Assuming advanced OpenType typographic features automatically work once converted to WOFF2 — the underlying font data and its OpenType feature tables are preserved through WOFF2 conversion, but actually using those features on the web (like enabling specific ligature sets or stylistic alternates) requires explicit CSS (font-feature-settings or the more modern font-variant-* properties) — conversion alone doesn't automatically activate them in rendered text.
• Confusing OTF's PostScript-outline heritage with actual rendering differences — while OTF can internally use PostScript-style outlines (distinct from TrueType's outline math), this distinction is generally invisible in final rendered appearance for typical web use, and not something most developers need to actively think about beyond knowing it exists.
• Font licensing restrictions applying the same way as TTF — like TTF, OTF fonts carry their own licensing terms governing web use, conversion, and redistribution, which need to be respected regardless of the specific desktop font format the font was originally distributed in.

Comparison & FAQ

Should I use OTF directly for web fonts?

No — convert to WOFF2 for actual web delivery, the same recommendation as for TTF. OTF is more relevant as a source format with rich typographic capability than a web-serving format.

Do I need to do anything extra to use OpenType's advanced typographic features on the web?

Yes — even after converting to WOFF2, actually activating specific OpenType features (ligature sets, stylistic alternates, small caps) requires explicit CSS via font-feature-settings or modern font-variant-* properties; the features being present in the font file doesn't automatically enable them in rendered text.

What's the practical difference between OTF and TTF for web use?

For actual web delivery, both are typically converted to WOFF2 and the underlying difference becomes largely invisible — OTF's main practical advantage is more robust support for advanced typographic features and certain complex writing systems in the original source font.

Can I freely use any OTF font on my website?

Only according to its license terms — like TTF, OTF fonts carry their own licensing governing web use, conversion, and redistribution, which needs to be checked and respected regardless of the underlying font format.