Webfont formats

Syntax

CSS @font-face syntax:

@font-face {
  font-family: 'FontName';
  src: url('webfont.eot'); /* IE9+ Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super modern browsers */
       url('webfont.woff') format('woff'), /* Modern browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#FontName') format('svg'); /* Legacy iOS */
}

Browser support

The numbers in the table specifies the first browser version that fully supports appropriate format.

• Desktop
• Mobile

Formats

TrueType font (TTF)

TrueType has long been the most common format for fonts on both Mac OS and Windows operating systems. Format allows for the most basic type of digital rights management – an embeddable flag that specifies if author allows embedding of the font file into things like PDF files and websites.

This format has been supported by all major browsers, but TTF fonts work in IE 9 and later only when the embedding bits are set to installable.

Embedded Open Type (EOT)

This format was created by Microsoft (the original innovators of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.

TrueType font can be converted to EOT by open source utility ttf2eot.

Web Open Font Format (WOFF/WOFF2)

Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. It was developed during 2009 and is now a World Wide Web Consortium (W3C) Recommendation. This format can also include metadata and license info within the font file. This format seems to be the winner and where all browsers are headed.

The WOFF format has been supported by all major browsers:

• Firefox since version 3.6
• Google Chrome since version 6.0
• Internet Explorer 9
• Opera since version 11.10
• Safari 5.1
• other WebKit-based browsers since WebKit build 528.

Simplest way to get WOFF font file from TTF is to use sfnt2woff.

WOFF2 is the next generation of WOFF. The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases).

WOFF2 browser support:

• Google Chrome 36
• Opera 23
• Firefox 35 (disabled by default)

Google has special tool to make WOFF2 font from TTF.

Scalable Vector Graphics font (SVG)

SVG fonts are text files that contain the glyph outlines represented as standard SVG elements and attributes, as if they were single vector objects in the SVG image. But this is also one of the biggest disadvantages of SVG fonts. While EOT, WOFF and PostScript-flavoured OpenType have compression built into the font format, SVG fonts are always uncompressed and usually pretty large. The main drawback to SVG fonts is there is no provision for font-hinting.

This format is the only one allowed by version 4.1 and below of Safari for iOS (iPhone, iPad). Currently SVG fonts are not supported by Firefox, IE, IE Mobile and Opera Mini.

TrueType font can be converted to SVG with FontForge.

TrueType Collection (TTC)

TrueType Collection (TTC) is an extension of TrueType format that allows combining multiple fonts into a single file, creating substantial space savings for a collection of fonts with many glyphs in common. They were first available in Chinese, Japanese, and Korean versions of Windows, and supported for all regions in Windows 2000 and later.

Mac OS included support of TTC starting with Mac OS 8.5.