CSS: Which font format is best to use in 2021?
You can embed and use your own fonts on a website. By now there are countless font formats and types, but only the woff2 format really matters (or its predecessor, the woff format).
Over the past decades a great many different font formats and types have been used on the web. Today you should only be using the woff2 format. As you can see here, every browser that matters now supports it.
If you are still forced to support Internet Explorer, you can fall back on the woff format. It is supported from Internet Explorer 9 onwards.
WOFF vs WOFF2
The biggest difference between woff and woff2 is the kind of compression used. woff uses a compression scheme based on deflate. woff2 uses one based on the newer and more efficient brotli algorithm.
On top of that, woff2 allows a font to be split across several files. That is particularly useful for Unicode fonts covering several languages: you then only need to load the Unicode ranges required for the requested language version of a page.
Using fonts
<meta charset="UTF-8">
<head>
<title>Web font example</title>
<style>
@font-face {
font-family: 'My great font';
src: url('./aldrich-v22-latin-regular.woff2') format('woff2'),
url('./aldrich-v22-latin-regular.woff') format('woff');
}
</style>
</head>
<body>
<p>First paragraph (no font specified).</p>
<p style="font-family:My great font">Second paragraph (My great font).</p>
</body>
</html>
The browser uses the first font format it supports, which is why it matters that woff2 comes before woff. Here you will find more detail on the @font-face CSS rule. Incidentally, you can download the Aldrich font here. Note that the file names contain a version number (v22 in the example above). It changes whenever a new version of the font is released, so always use the file names the tool shows you. By default the tool gives you woff2 only. For woff you have to pick the variant for very old browsers (currently Historic Support). The Legacy Support option, by contrast, yields ttf rather than woff.
A look back
EOT (Embedded Open Type)
The eot font format was invented by Microsoft and is a proprietary solution. You only needed this format for Internet Explorer versions older than 9. No browser that matters today supports it any more.
TTF (TrueType Font) and OTF (OpenType Font)
ttf and otf are font formats for operating systems. In principle you can use them on the web as well, but woff and woff2 are better suited to that purpose. It is worth noting that you can think of woff / woff2 as a wrapper around ttf / otf data.
SVG (Scalable Vector Graphics) fonts
Version 1.1 of SVG introduced a font format of its own, making it possible to describe a font purely in SVG markup. Compared to the other font formats this solution is complicated, and it never caught on. With version 2 of SVG the format was removed from the specification again.
Browser support at a glance
| Format | Full name | Browser support |
|---|---|---|
| EOT | Embedded OpenType | caniuse |
| TTF/OTF | TrueType Font / OpenType Font | caniuse |
| WOFF | Web Open Font Format | caniuse |
| WOFF2 | Web Open Font Format 2 | caniuse |
| SVG Fonts | Scalable Vector Graphics fonts | caniuse |
About Netcup (advertisement)
The German host Netcup offers, among other things, affordable and powerful web hosting packages, KVM-based root servers and dedicated servers. With our voucher codes you can save even more (6€ off your first order, 30% off all KVM-based root servers, ...).