Web Fonts: Why Use truetype or woff2?

Today I came across some code where the author referenced a woff2 font but set format to truetype. I was curious about how it would render, so I looked into it.

Example

@font-face {
    font-family: 'CZL';
    src: url('https://xxx/CZL.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Answer

“truetype” and “woff2” are font formats specified in the CSS @font-face rule.

You may encounter these two formats when defining custom fonts on a web page. Their main differences are file size and compatibility.

TrueType

This font format was originally developed by Apple and later extended by Microsoft. It is a mature, widely used format, particularly on Mac and Windows, where almost all system fonts use TrueType. Its main advantage is broad compatibility.

WOFF2

(Web Open Font Format 2) is a font format designed specifically for the web. Compared with TrueType and other traditional font formats, WOFF2 font files are smaller and therefore load faster. Besides smaller file sizes, WOFF2 also supports other web features, such as cross-origin loading. However, its main drawback is that compatibility is not as broad as TrueType, especially in older browsers.

Using the same font in different formats (for example, TrueType and WOFF2) generally does not affect its appearance, because both formats describe the same font outlines. However, the format can affect loading speed (since WOFF2 files are usually smaller) and compatibility with older browsers that do not support WOFF2.

---

This is why some web pages provide multiple formats for the same font. In this case, the browser selects the best format it supports. For example, if the browser supports WOFF2, it will choose the WOFF2 file because it is smaller and loads faster.

In the end, I still chose woff2