How We Reduced Our Web Font File Size 1040x Smaller

by | Last Updated Jun 12, 2020 | Performance and Optimisation, WordPress | 0 comments

In this post, I will explain to you 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 weight 240 KB and 239 KB.

That is 479 KB for just two fonts.

Please note that the final output and savings are depending on the font family and other settings you use.

Typical Performance Optimisation Efforts for Fonts

Every website owners are so much concerned about their web page performance.

There are so many works to do to make sure the website is loads as fast as possible.

Having a robust server and network infrastructure plays a vital role.

Latest PHP version, updated Themes and Plugins, compress images, minify CSS and JS files are a few and well-known steps.

But there is an underrated file type that needs to give more attention. Do you know what is that?

That’s the FONTS.

Optimising a web font file, reduce the website loading time significantly.

Let me explain it.

But before that, let me brief how most of us optimise the font files.

When it comes to Web Font optimisation, usually we 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 so that we can save HTTP request to Google Fonts servers.

When a website request fonts from Google, there should be external HTTP/DNS request made to fonts.googleapis.com and fonts.gstatic.com.

For a performance optimisation point of view, these requests are costly. That’s one of the main reasons I prefer hosting fonts locally.

The more external calls make the website slower.

My Old Setup

I am using Divi as my WordPress theme.

In Divi theme, we can upload a custom font 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. I found that the WOFF 2.0 version is 171% smaller than TTF version.

So, my first step to achieving the 1040% 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 could guess, the format is WOFF 2.0 instead of TTF.

Do you know by following these steps you can increase the Google Page Insight score and reduce the total website loading time?

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 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.

With this Webfont Generator, we can convert the TTF fonts to WOFF 2.0 format.

Visit the Webfont Generator tab and upload the Montserrat Regular font file which we downloaded from Google Fonts.

Once the uploading finished, select EXPERT instead of OPTIMAL, which would give you full control over the font.

Montserrat is a fatty font in sizes. The reason is that it has many more glyphs (1904 glyphs) than other fonts.

Now we are going to 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 slightly vary.

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 language you add here can make the font bigger.

Unicode Tables

My website sells services, and the currency is in INR/Rs/₹.

So I have to select the Currency Symbol here explicitly. Then only I can see ₹ symbol.

Again, the more Unicode Tables you select here makes the font bigger.

Subset Preview

Here, you can see a live preview of the font you are about to download.

So, if you see some glyphs are missing that your website requires, make sure you adjust the values accordingly.

Advanced Options

Here, I emptied Font Name Suffix text field, so that my font names becomes 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 finished, verify the font size. I am sure that you may be dancing now with a rock song.

Third Step – Upload the Reduced Font Files

Let us now upload the generated font to our web hosting server and add 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 logged to the WordPress Admin Dashboard, go to Divi > Theme Options.

In Divi Theme Options page, under 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: normal;
	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: normal;
	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.

Want to See Your WordPress Website Loads in a Second?

We offer a 30 Day Money Back Guarantee, so joining is Risk Free

By Jafar Muhammed

Jafar Muhammed is an advocate of the open web, an open-source contributor, passionate to bring more people online. He is the CEO of Rovity.

Check Out These Related Posts

Temporary WordPress Login Without Password

Temporary WordPress Login Without Password

In this tutorial, you will learn how you can let anyone access your WordPress account quickly and safely. You don't need to provide your admin username and password. They can access securely with a simple self expiry link.Why Do I Need to Provide My WordPress Admin...

read more

0 Comments

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *