Hosting your custom fonts by yourself is an important step to making your website more independent of third-party services. Webfonts have always been reasonably easy to implement with WordPress. There are many plugins helping you with this task.
Thanks to the new generation of WordPress themes, the block themes, hosting your custom fonts got even more simple. The theme.json of your child theme is the best place to define custom fonts.
When you are adding your custom fonts to your website, you may ask yourself which font file format you should upload. Typical bundles from webfont providers contain multiple files very often. These may be of type WOFF, WOFF2, EOT, TTF, or SVG.
A typical CSS code to load your custom font files has previously looked something like this.
/* berkshire-swash-regular - latin-ext_latin */
@font-face {
font-family: 'Berkshire Swash';
font-style: normal;
font-weight: 400;
src: url('../fonts/berkshire-swash-v16-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/berkshire-swash-v16-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/berkshire-swash-v16-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/berkshire-swash-v16-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/berkshire-swash-v16-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/berkshire-swash-v16-latin-ext_latin-regular.svg#BerkshireSwash') format('svg'); /* Legacy iOS */
}But is it essential to upload so many font files to your website?
Let’s have a quick look at the different font formats and their characteristics.
Font format comparison
For the font format comparison, we have used the font Noto Sans (v27) from Google Fonts. This is also the default primary text font in our Base FSE theme for WordPress. In this comparison, we have used only the Latin Unicode range in the regular (400) font weight. The font files have been generated with the amazing google-webfonts-helper by Mario Ranftl.
Browser support has been verified with caniuse.com in July 2022 based on the global percentage of all users (based on data of visitors of caniuse.com). We have only verified support for reasonably modern browsers in our comparison (IE9+, Edge, Firefox 3.6+, Chrome 5+, Safari 5.1+, Opera 11.5+). If you are building a website for historic browsers you may have other priorities than optimizing your font formats for best performance.
| Font Format | File Size | Browser Support | Unsupported Browsers |
|---|---|---|---|
| EOT | 14.4 kb | 0.56% | only supported by Internet Explorer |
| SVG | 56.1 kb | 19.1% | only supported by Safari |
| TTF | 27.7 kb | 98.6% | Opera Mini (all) |
| WOFF | 16.6 kb | 98.4% | Opera Mini (all) |
| WOFF2 | 12.9 kb | 96.9% | Internet Explorer (all), Opera Mini (all) |
When we’re comparing the results, we can see that we have several font formats with very high compatibility across browsers. It is obvious that Opera Mini does not support any of the investigated font formats. Other than that, Internet Explorer is the only browser that does not support WOFF2, the best format when it comes to performance (smallest file size).
Even if since June 15, 2022, Internet Explorer has retired, there are still many users out there. Especially in corporate contexts where the end-user may not always have control over the software installed on their device, this may be the case. Therefore, as of 2022, we believe the ideal font format set-up should still take support for IE into consideration.
WOFF me up, baby!
The clear winners of our font format comparison are WOFF and WOFF2. If there was no Internet Explorer, WOFF2 would be the only format we’d need for modern browsers. The best-in-class performance of WOFF2 in terms of compressing font files to the smallest file size makes this font format the best choice for your website.
Smaller font file sizes will help you to reduce the overall load of your website. This leads to a faster website and better page speed.
A typical recommendation based on the results of our comparison would be to only upload WOFF2 and WOFF font files to your website. WOFF2 is the default format for most of your visitors. WOFF is the fallback for Internet Explorer users. If you are looking at our results with the font Noto Sans only, you could even come to the conclusion to use WOFF2 and EOT as the fallback font format (EOT was slightly smaller than WOFF). But the file size results may be different for different fonts and Unicode ranges. We’d still recommend going for WOFF as the fallback font simply to stick with only modern font formats. At the same time, WOFF will help you to increase compatibility with very old versions of other browsers.
The result of this comparison is clear: WOFF2 plus WOFF as the fallback are the only font formats you will need to upload to your website.
A word on font file optimization
Now that we know that WOFF2 plus WOFF may be the best constellation for performance-optimized font files, we must talk about how we can optimize even further within those file formats.
Fonts come in different flavors. They may be regular, bold, or italic. And there are different Unicode ranges (e.g. Latin, Vietnamese, or Cyrillic). Some modern fonts are available as variable fonts.
Typically, a visitor to your website will not need the full Unicode range in all font variations all the time. A single page of your website may only utilize a small subset of these possibilities. Therefore, splitting font files by font variation and Unicode range is a best practice to follow. Doing so will help you to reduce the file sizes transferred. And saving kilobytes is the ultimate goal of optimizing font files.
If you are planning to use a font that is available at Google Fonts, we recommend giving google-webfonts-helper a try for optimizing and splitting your font files easily.