Elementor 3 is a great WordPress plugin that, by default, includes the Roboto font which can add about 80kb to your page load. This is especially bad if you don’t use that font for your pages.

How to reduce the font size to zero

Amazingly, webmasters use a ton of Google fonts which is odd. Including any custom font will have a negative impact on your page speed score. Yes, for some designer pages, a custom font can make all the difference. The same is true for branding but for most pages, the system stack is the best option. Also, since system fonts are already on a users device, the download time is 0.

What is the system stack

Every computing device comes with system fonts which are built into the operating system. Because of that, it is an advantage if a web designer uses the built-in fonts instead of downloading some Google font. Here is what we use for most of the websites when fast loading speeds are a must.

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

If you are working on an HTML-driven web site, then all you have to do is include the above snippet into your styles.css file. That’s it. For WordPress users, it’s a little bit trickier because the theme has to have that feature built in.
Here are two themes which you can download for free. Both will let you chose the “system stack” from the font selection drop-down (WordPress Customizer).

  • GeneratePress
  • Kadence WP

The GeneratePress theme is available for free. To get it, simply do a theme search from within WordPress and install it. The Kadence WP theme is also free but not yet available in the WP theme repository.

Removing Roboto font

If you are taking advantage of the system fonts, then it’s important to remove the Roboto font which Elementor defaults to. To remove them, you open the Elementor settings from your WP dashborad and check the option that forces Elementor to use the theme fonts.

After that, load the home page open it in Elementor. In the left upper corner, you can access additional Elementor settings and specify the font which is set to Roboto. Click the little pencil icon and scroll the font list all the way to the top. System fonts should be your first option. Repeat that for all four check marks and when finished, save.

Now do a website speed test to make sure that the Roboto fonts are gone. If still present, then empty your cache and try again. Removing the Roboto fonts decreases the page size by about 80 kb and several server requests.

All of the above takes only a few minutes and will improve your page score noticeably. The system fonts trick is still little-known but the number of website who are taking advantages of the device fonts is growing. I hope that you find this article useful. Leave a comment if you have a suggestion or require additional information. Thank you for reading. PWD

Similar Posts

Leave a Reply

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