This post will explain how I saved 437 KB of my web font files. That is 1040x lighter than before.
You can also dramatically reduce the file size of your fonts with a less than 5 minutes workaround. I will explain it step by step.
Prerequisite
I assume that you are using a locally hosted web font and not calling it from external resources like Google Fonts. This tip is not limited to WordPress. Every type of website can make use of this method.
Montserrat is the font I use on this website. I use Montserrat Regular for body text and Montserrat Bold for headings. Google’s analytics says that more than 7,400,000 websites use Montserrat, a super stylish font.
But Montserrat is a heavy font. Both Regular and Bold variants weigh 240 KB and 239 KB. That is 479 KB for just two fonts.
Please note that the final output and savings depend on the font family and other settings you use.
Typical Performance Optimisation Efforts for Fonts
Every website owner is so much concerned about their web page performance. There is so much work to do to make sure the website loads as fast as possible.
Having a robust server and network infrastructure plays a vital role. The latest PHP version, updated Themes, Plugins compress images, minify CSS and JS files are a few well-known steps.
But there is an underrated file type that needs to give more attention. Do you know what that is?
That’s the FONTS.
Optimizing a web font file reduces the website loading time significantly. Let me explain.
But before that, let me brief how most of us optimize the font files. When it comes to Web Font optimization, usually consider hosting the fonts locally. Locally means we serve it from our Web servers.
Serving web fonts from services like Google Fonts is efficient and easy to implement. But we prefer hosting the fonts locally to save HTTP requests to Google Fonts servers.
When a website requests fonts from Google, external HTTP/DNS requests are made to fonts.googleapis.com and fonts.gstatic.com. From a performance optimization point of view, these requests are costly. That’s one of the main reasons I prefer hosting fonts locally. More external calls make the website slower.
My Old Setup
I am using Divi as my WordPress theme. We can upload a custom font in the Divi theme and then use it site-wide instead of relying on Google Fonts.
Please see How To Upload Custom Fonts in Divi Builder to know how that works.
But the problem with this method is that Divi won’t support modern web font formats like WOFF or WOFF 2.0. I tested the TTF version and WOFF 2.0 version of the same Montserrat font. The WOFF 2.0 version is 171% smaller than the TTF version.
So, my first step to achieving the 1040x lighter version of my Montserrat font is not to use Divi’s native custom font feature. Instead, I called the fonts directly to WordPress via CSS. But as you can guess, the format is WOFF 2.0 instead of TTF.
Do you know that you can increase the Google Page Insight score and reduce the website loading time by following these steps?
Yes, you can. Just like I did.
First Step – Download Montserrat Font from Google Fonts
To download Montserrat Font, head over to Google Fonts.
In this Google Fonts page for Montserrat Font, click on the SELECT THIS FONT button.
Then you can see the 1 Family Selected drawer at the bottom of the page.
Now hover over the down arrow to download the font to your computer.
Second Step – Font Squirrel Webfont Generator
Font Squirrel’s Webfont Generator is an excellent tool to convert fonts. We can convert the TTF fonts to WOFF 2.0 format with this Webfont Generator. Visit the Webfont Generator tab and upload the Montserrat Regular font file, which we downloaded from Google Fonts.
Once the uploading is finished, select EXPERT instead of OPTIMAL, which would give you complete control over the font.
Montserrat is a fat font in size. The reason is that it has many more glyphs (1904 glyphs) than other fonts. We will make our font file as slim as possible by removing the additional glyphs from the font.
Here are the settings I applied for my requirements. Your needs may vary slightly. I left everything to its default value except those I mentioned below.
Font Formats
I only checked WOFF2. However, if you need to support old browsers, you can select other formats. This selection won’t impact the font-weight.
Subsetting
Select Custom Subsetting here. Now you can see many more options to adjust.
Language
Since my website is only in English, I have only selected English. The more languages you add here can make the font bigger.
Unicode Tables
My website sells services, and the currency is INR/Rs/₹. So I have to select the Currency Symbol here explicitly. Then only I can see the ₹ symbol. Again, the more Unicode tables you choose here, the bigger the font.
Subset Preview
Here, you can see a live preview of the font you are about to download.
So, if you see some missing glyphs that your website requires, make sure you adjust the values accordingly.
Advanced Options
Here, I emptied the Font Name Suffix text field so that my font names became short.
Agreement
You must check the Yes, the fonts I’m uploading are legally eligible for web embedding checkbox to see the Download Your Kit button.
Once you are ready, hit the Download button. Once the downloading is finished, verify the font size. I am sure that you may be dancing now to a rock song.
Third Step – Upload the Reduced Font Files
Now upload the generated font to our web hosting server and add it to the WordPress website. As I mentioned, I am using the Divi theme. Your theme’s exact settings may vary. But the concept is the same.
I have logged in to my DirectAdmin account and uploaded the font files to /wp-content/rovity-assets/fonts-22022020. In this path, /wp-content is WordPress’s Contents directory. The rovity-assets/fonts-22022020 is a custom folder I created to store these files.
You can also use SFTP to upload these files to your WordPress directory.
Once you upload the fonts, let’s log in to the WordPress Admin Dashboard. We are going to call our custom fonts globally. Once you have logged into the WordPress Admin Dashboard, go to Divi > Theme Options.
In the Divi Theme Options page, under the General tab, scroll down to the bottom, where you can see Custom CSS.
@font-face {
font-family: 'montserratbold';
src: url(https://cdn.rovity.io/wp-content/rovity-assets/fonts-22022020/montserrat-bold.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap
}
@font-face {
font-family: 'montserratregular';
src: url(https://cdn.rovity.io/wp-content/rovity-assets/fonts-22022020/montserrat-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap
}
body, p {
font-family: 'montserratregular'
}
h1, h2, h3, h4, h5, h6 {
font-family: 'montserratbold'
}These are the CSS codes that I added to the Custom CSS. The font-family, src, and format may vary based on your font specification.
Make sure you save the changes by clicking on the Save Changes button. You may need to clear the cache to see the new font in action.
That’s it; we are now using the super tiny version of our font.
Have you tried these steps? Have you found this tip to reduce your web font-weight significantly? Let me know in the comments section below.
If you enjoyed this tutorial, then you’ll love Rovity, and our fast-growing premium shared hosting on the cloud. Check out our subscription plans.
