How We Reduced Our Web Font File Size 1040x Smaller

by | Last Updated Mar 7, 2021 | Performance and Optimisation, WordPress | 0 comments

This post 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 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, and 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 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 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.

The 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. I found that the WOFF 2.0 version is 171% smaller than the 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 that you can increase the Google Page Insight score and reduce the total 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.

Select This Google Font Button

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.

Google Font Download Button

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.

Font Squirrel Expert Settings

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

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

Now 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 language 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 select here to make the font bigger.

Subset Preview

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

Font Squirrel Subset Preview

So, if you see some glyphs are missing 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.

Font Squirrel Download Your Kit

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

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

Upload Compress Fonts to Rovity Assets

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 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 our subscription plans.

We engineered our cloud infrastructure with Performance, Speed, Scalability, and Security in mind.

That’s why we built Rovity with AWS, CloudLinux OS, DirectAdmin, and LiteSpeed Web Server.

Come and experience the next generation of shared hosting on the cloud

By Jafar Muhammed

Jafar Muhammed has 10+ years of experience in WordPress, web hosting, domain names, DNS, CDN, server administration, etc. He is an open web advocate. He is the CEO of Rovity, the fastest growing premium shared hosting startup in India.

Check Out These Related Posts

Avoid These 8 Blogging Mistakes in 2021

Avoid These 8 Blogging Mistakes in 2021

Blogging plays a large part in the $400 billion content marketing industry. Blogs are an excellent way to make substantial extra income. They're also powerful tools for generating traffic to your website. Blogging isn't just a part-time gig and a digital marketing...

read more
How to Add HTTP Security Headers in WordPress

How to Add HTTP Security Headers in WordPress

Would you like to add HTTP security headers to your WordPress website? With HTTP security headers, your WordPress website will have an extra layer of protection. This will prevent malicious activity from affecting your website performance. The tutorial below will walk...

read more

0 Comments

0 Comments

Submit a Comment

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