Font Formats Explained

Overview of Font Formats

Font formats have evolved over decades, from early desktop formats to modern web-optimized formats. Each serves different purposes and has unique characteristics.

Format	Full Name	Primary Use	Web Support
TTF	TrueType Font	Desktop & Web	All browsers
OTF	OpenType Font	Desktop & Print	All browsers
WOFF	Web Open Font Format	Web	All browsers
WOFF2	Web Open Font Format 2	Web (Modern)	Modern browsers
EOT	Embedded OpenType	Legacy Web	IE only
SVG	SVG Font	Legacy iOS	Limited
DFONT	Data Fork Font	macOS	None
PFB	Printer Font Binary	Print/Legacy	None

Detailed Format Information

TTF - TrueType Font

Developed by Apple and Microsoft in the late 1980s, TrueType is one of the most common font formats. It uses quadratic Bezier curves for glyph outlines.

Extension: .ttf

Best For: Desktop applications, cross-platform compatibility

Pros: Universal support, well-documented, works on all operating systems

Cons: Larger file sizes for web, no advanced compression

Learn More About TTF

OTF - OpenType Font

A joint development by Adobe and Microsoft, OpenType extends TrueType with advanced typographic features. It supports both TrueType and PostScript outlines.

Extension: .otf

Best For: Professional typography, print design, advanced layout features

Pros: Ligatures, alternates, swashes, extended language support

Cons: Some features not supported in all applications

Learn More About OTF

WOFF - Web Open Font Format

WOFF was created specifically for web use. It wraps TrueType/OpenType fonts with compression and metadata, reducing file sizes by about 40%.

Extension: .woff

Best For: Web fonts with broad browser support

Pros: Good compression, all modern browsers support it, includes metadata

Cons: Larger than WOFF2, superseded by WOFF2 for modern sites

Learn More About WOFF

WOFF2 - Web Open Font Format 2

The successor to WOFF, using Brotli compression for 30% smaller file sizes. This is the recommended format for modern web development.

Extension: .woff2

Best For: Modern web development, performance-focused sites

Pros: Best compression, fastest loading, supported by all modern browsers

Cons: Not supported in IE, older browser versions

Learn More About WOFF2

EOT - Embedded OpenType

Created by Microsoft specifically for Internet Explorer. EOT includes DRM features and compression but is now considered a legacy format.

Extension: .eot

Best For: Supporting Internet Explorer 8 and below

Pros: Only option for old IE versions

Cons: IE only, complex creation process, obsolete

Learn More About EOT

SVG - SVG Font

Fonts defined using SVG markup. Once needed for older iOS Safari, now largely obsolete but still useful for specific design applications.

Extension: .svg

Best For: Legacy iOS Safari (pre-4.2), decorative purposes

Pros: Can include colors and gradients, editable as text

Cons: Very large files, poor rendering, mostly deprecated

Learn More About SVG

DFONT - Data Fork Font

A macOS-specific format that stores font data in the data fork rather than the resource fork. Used primarily for system fonts on Mac.

Extension: .dfont

Best For: macOS system fonts, Mac-specific applications

Pros: Native macOS support

Cons: Mac only, not web-compatible

Learn More About DFONT

PFB - Printer Font Binary

PostScript Type 1 font format, historically important for professional printing. Requires companion .pfm (metrics) and sometimes .afm files.

Extension: .pfb

Best For: Legacy print systems, PostScript workflows

Pros: Professional print quality, widely supported in print industry

Cons: Requires multiple files, limited character set, legacy format

Learn More About PFB

Which Format Should You Use?

For Modern Websites

Use WOFF2 as primary format with WOFF as fallback:

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
}

For Desktop Applications

Use TTF or OTF depending on your needs:

TTF for maximum compatibility
OTF for advanced typography features

For Legacy Browser Support

Include additional formats for older browsers:

@font-face {
  font-family: 'MyFont';
  src: url('font.eot');
  src: url('font.eot?#iefix') format('embedded-opentype'),
       url('font.woff2') format('woff2'),
       url('font.woff') format('woff'),
       url('font.ttf') format('truetype');
}