The Missing Guide to Font Formats: TTF, OTF, WOFF, EOT & SVG

By on May 2, 2016 in How To

Ah, font formats! EOT, TTF, WOFF, SVG, WOFF2... There are so many choices! Unfortunately, despite the huge variety of formats, there isn’t a single one that works in all browsers. What does this mean? That you'll have to make use of multiple font formats to deliver a consistent experience.

Font Formats by Browser Support

cross-browser support Pin It

Now, let's brush up on some basics and take a closer look at the different font formats in use on the Web.

TrueType Font (TTF)

ttf Pin It

The TrueType font format was developed by Apple and Microsoft as a response to the PostScript font format. TTF has long been the most common format for fonts on Mac and Windows operating systems. All major browsers have supported it. However, IE8 has no support for TTF; and starting with IE9 it is only partially supported as the fonts must be set to "installable".

TTF allows for the most basic type of digital rights management – an embeddable flag that specifies if the author allows embedding of the font file into PDF files and websites. There are some tools that allow modifying this flag, which is one of the major issues about the TTF format. Another drawback is that TTF/OTF fonts are not compressed and, as a result, they have a larger file size.

OpenType (OTF)

otf Pin It

OpenType is the evolution of TTF. It is the result of a joint effort between Adobe and Microsoft. OpenType fonts contain the screen and printer font data in one component. OTF has several exclusive capabilities, including support for multiple platforms and expanded character sets. OTF fonts can be used by Macintosh and Windows operating systems.

OTF also permits storage of up to 65,000 characters. This additional space gives designers the freedom to include add-ons such as small caps, old style figures, alternate characters and other extras that previously had to be distributed as separate fonts.

Embedded Open Type (EOT)

eot Pin It

EOT fonts were designed by Microsoft to be fonts used on the web. It is an attempt to address the copyright shortcomings of TTF and OTF when publishing on the web. EOT uses a Microsoft tool to create a font from existing TTF/OTF fonts. Compression and subsetting make the font files smaller. Subsetting provides some copyright protection, but EOT also uses encryption for further protection. Sounds promising? Yup, but EOT format is only supported by Internet Explorer.

Web Open Font Format (WOFF)

woff Pin It

WOFF is basically OTF or TTF with metadata and compression supported by all major browsers. It was created to live on the web. It is the result of collaboration by the Mozilla Foundation, Microsoft, and Opera Software. Because fonts are compressed, they load faster. Metadata allows for the inclusion of license data within the font file to address copyright issues. It is a World Wide Web Consortium Recommendation and is clearly the future of font formats.

WOFF2 is the next generation of WOFF. The WOFF2 format offers a 30% average compression gain over the original WOFF. Because it still just a recommended upgrade, it does not have the wide support of WOFF.

Scalable Vector Graphics font (SVG)

svg Pin It

SVG fonts are defined using the SVG's ‘font’ element. These fonts contain the glyph outlines as standard SVG elements and attributes as if they were a single vector object in the SVG image. The greatest drawback to SVG fonts is the lack of font-hinting. Font hinting is extra information embedded to render small font sizes with quality and legibility. Also, SVG is not great for body text. Since text selection is broken on Safari, Safari Mobile, and Chrome, you cannot select individual characters, words, or any custom selection. You can only select the whole row or paragraph of text.

However, if you are targeting iPhone and iPad users, SVG fonts are your only choice. This is the only file format allowed by version 4.1 and below of Safari for iOS.

Choose Your Font Formats Wisely

As you can see, there are many factors that may affect the rendering of your web fonts. To provide quality and consistency, it is crucial to test thoroughly on all possible OS and browser combinations.

Was this helpful? Do you have any questions? Share your thoughts in the comments below!