Which font format to use in web pages

Let’s start with the formats you should not use

• EOT (Embedded OpenType) is a font format that was developed by Microsoft. It is a proprietary format that is only supported by Internet Explorer.
• SVG It’s only supported in Safari and Android Browser.

Let’s talk about the commonly used formats (Supported by all modern browsers)

• TTF (TrueType Font) is a font format developed by Apple in late 1980s. Then Apple licensed TrueType to Microsoft for free.

• OTF (OpenType format) is derived from TrueType, supporting additional typographic features. It was developed by Microsoft and Adobe in 1996.

• WOFF (The Web Open Font Format) is a compressed version of the TrueType and OpenType font formats, specifically designed for use on web pages. Developed by Mozilla in 2009.
  WOFF uses zlib compression to significantly reduce file sizes. For the same font, WOFF files can be over 40% smaller than their TTF/OTF counterparts, making them more efficient for web use.

• WOFF2 WOFF2 is an enhanced version of WOFF that offers better compression. It utilizes Brotli, a lossless data compression algorithm developed by Google. WOFF2 became a W3C Recommendation in 2018.

File size comparison

Let’s compare the same font in different formats, let’s take the Atkinson-Hyperlegible-Regular font as an example.

• TTF: 42.6 KB
• WOFF: 22.8 KB
• WOFF2: 15.9 KB

The difference is pretty clear:

• WOFF is 46.5% smaller than TTF.
• WOFF2 is 30.3% smaller than WOFF.
• WOFF2 is 62.7% smaller than TTF.

Let’s say that we are going to use Regular, Bold and Italic styles of the font. The total size of the font files would be:

• TTF: Regular 42.6 + Bold 43.8 + Italic 43.5 = 130 KB
• WOFF: Regular 22.8 + Bold 23.8 + Italic 24.6 = 71.2 KB
• WOFF2: Regular 15.9 + Bold 16.5 + Italic 17.7 = 50.1 KB

Now if we are using WOFF2 instead of TTF, we are saving 79.9 KB of bandwidth.

Conclusion

With the current browser support, we should use WOFF2 format and forget about other formats.
WOFF2 is supported by all browsers except Internet Explorer
(I don’t think any one would want to support IE 😅.)

Check browser support for WOFF2

So instead of using multiple font formats like this:

@font-face {
 font-family: 'Atkinson';
 src: url('atkinson-hyperlegible-regular.ttf') format('ttf'),
 url('atkinson-hyperlegible-regular.woff') format('woff'),
 url('atkinson-hyperlegible-regular.woff2') format('woff2');
}

We can just go with WOFF2 format like this:

@font-face {
 font-family: 'Atkinson';
 src: url('atkinson-hyperlegible-regular.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}