What is MIME type "font/otf"?

A MIME type is a string that tells browsers and other tools how to handle a particular kind of file.

The MIME type font/otf defines digital font files in the OpenType format. It signals to systems and browsers how to load and render these advanced fonts.
OpenType fonts use vector data so text scales cleanly at any size.

High-Quality Rendering: Fonts display crisply and smoothly at all sizes.
Advanced Typography: They support features like ligatures and stylistic alternates.
Wide Compatibility: They work across web browsers, desktop applications, and graphic design software.

This MIME type applies to files used for digital typography. You often encounter it with files such as OTF (OpenType Font File). Similar font resources include those with the TTF (OpenType Font), TTC (OpenType Font Collection), and OTC extensions.
These files enable precise typographic control for both digital and print media. For more details, visit the IANA media types registry.

Associated file extensions

.ttf, .otf, .ttc, .otc

Usage Examples

HTTP Header

When serving content with this MIME type, set the Content-Type header:


    Content-Type: font/otf

HTML

In HTML, you can specify the MIME type in various elements:


    <a href="file.dat" type="font/otf">Download file</a>

Server-side (Node.js)

Setting the Content-Type header in Node.js:


    const http = require('http');    
    
    http.createServer((req, res) => {    
      res.setHeader('Content-Type', 'font/otf');    
      res.end('Content here');    
    }).listen(3000);

Associated file extensions

.ttf, .otf, .ttc, .otc

FAQs

Is font/otf the standard MIME type for OpenType fonts?

Yes, font/otf is the official standard registered with IANA. While older configurations might use application/x-font-otf or font/opentype, modern web servers and browsers prefer the standardized font/otf type for .otf files.

How do I configure Apache or Nginx to serve OTF files?

For Apache, add AddType font/otf .otf to your .htaccess or configuration file. For Nginx, ensure your mime.types file contains the line font/otf otf;. This ensures the server sends the correct Content-Type header to the browser.

How do I reference an OTF file in CSS?

You use the @font-face rule. When defining the source, include the format hint format('opentype') to help the browser identify the file type immediately. For example: src: url('myfont.otf') format('opentype');.

Why use WOFF2 instead of font/otf for web pages?

While browsers render font/otf perfectly, the files are often uncompressed and larger than necessary. It is best practice to convert your OTF files to WOFF2 format for production websites, as this significantly reduces file size and improves page load speed.

Why is my OTF font blocked by a CORS error?

Browsers enforce strict Cross-Origin Resource Sharing (CORS) policies on font files. If you host your font/otf file on a CDN or a different domain, your server must send the Access-Control-Allow-Origin header (e.g., set to *), or the browser will refuse to render the text.

Does font/otf apply to .ttf files?

Technically, OpenType is a container that can hold TrueType outlines, so the formats are closely related. However, for clarity and strict adherence to standards, you should generally use font/ttf for .ttf files and reserve font/otf for .otf files.

General FAQ

What is a MIME type?

A MIME (Multipurpose Internet Mail Extensions) type is a standard that indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.

MIME types are important because they help browsers and servers understand how to process a file. When a browser receives a file from a server, it uses the MIME type to determine how to display or handle the content, whether it's an image to display, a PDF to open in a viewer, or a video to play.

MIME types consist of a type and a subtype, separated by a slash (e.g., text/html, image/jpeg, application/pdf). Some MIME types also include optional parameters.

How do I find the MIME type for a file?

You can check the file extension or use a file identification tool such as file --mime-type on the command line. Many programming languages also provide libraries to detect MIME types.

Why are multiple MIME types listed for one extension?

Different applications and historical conventions may use alternative MIME identifiers for the same kind of file. Showing them all helps ensure compatibility across systems.