Web Font Optimization: File Size Benefits and Loading Strategies for Converting TTF to WOFF2
Converting TTF/OTF to WOFF2 reduces file size by approximately 30% compared to WOFF, and 50% compared to uncompressed TTF. When paired with correct strategies, it can optimize web page loading performance.
Cập nhật 2026-08-11
Compression Size Benefits of WOFF2
WOFF2 uses the Brotli compression algorithm. Compared to WOFF which uses gzip compression, WOFF2 reduces file size by approximately 30%, and compared to uncompressed raw TTF/OTF fonts, it reduces file size by approximately 50%.
Size compression directly reduces the amount of font data transferred during web page loading, lowers bandwidth usage, and shortens the time to complete first-screen resource loading. This is particularly suitable for page access over mobile network environments.
Browser Support for WOFF2
All major desktop and mobile browsers released after 2016 natively support the WOFF2 format, and no additional compatibility handling is required.
The starting versions of WOFF2 support for different browsers can be found in the table below. All current mainstream browser versions support this format, so it can be safely used in production environments.
| Browser | First version with native WOFF2 support |
|---|---|
| Chrome | Chrome 48 (released January 2016) |
| Firefox | Firefox 44 (released January 2016) |
| Safari | Safari 10 (released September 2016) |
| Edge | Edge 14 (released August 2016) |
Cooperation Scheme of @font-face and Subsetting
When using WOFF2 fonts, you need to declare the font via the @font-face rule in CSS, and assign the highest priority position of the src attribute to the WOFF2 format.
Matching with the unicode-range attribute enables font subsetting. Each @font-face corresponds to a unicode range, and the browser only loads the font subset required for the current page content, reducing unnecessary resource loading.
Key Points for Font Rendering and CJK Font Optimization
In CSS, you need to declare font-display: swap for @font-face. This property allows the browser to display text with the default system font before the WOFF2 font finishes loading, avoiding blank text blocks on the first screen and ensuring that first-screen content can be read normally.
CJK (Chinese, Japanese, Korean) character set fonts contain thousands to tens of thousands of characters, and the full file size can reach several MB to more than ten MB. You must extract the required characters for the page via subsetting to keep the single file size within a reasonable range and ensure loading performance.
Câu hỏi thường gặp
Do I still need to keep the old WOFF or TTF formats as fallbacks?
Sites targeting mainstream users can only retain WOFF2. If you need to support old browsers released before 2016, you can append WOFF as a fallback format in the @font-face src attribute, subject to the official public information of the site.
Is the conversion result of the online TTF to WOFF2 tool compliant?
Compliant conversion tools follow the WOFF2 format specification. The TTF/OTF to WOFF2 tool provided by OKfmt generates files that meet the standard and can be directly used in production environments.
Do non-Chinese fonts need to be subsetted?
Western character sets have a small native size, and the full size is generally in the range of 100KB to 300KB. If you only use common characters, you can also perform subsetting to further reduce the size and shorten loading time.