Don’t use the Twenty Twenty theme: It slows down your website!

There are many virtues to WordPress Twenty Twenty’s default theme, and one of its biggest innovations was the use of variable fonts, specifically Inter.

But it turns out that the use of the Inter font is generating an unexpected problem: it is slowing down the loading of the sites on which Twenty Twenty is active.

The problem

In several tests I have found that the difference can be up to 2 additional seconds of load, a huge amount.

This is because Inter is a web font, which the browser has to download to display your contents, it is not physically installed in the theme folder or in your visitors’ computers, as other traditional fonts are (Arial, Times, etc.)

This means that in order to display your content the theme requires the user’s browser to generate requests to download the Inter font from Google Fonts’ server and then display your content.

So, the initial optimization of being a variable font is sadly compensated with the slowness of having to download the font.

Solutions

There are several possible solutions to this important problem.

Dont use Twenty Twenty

Exactly, it’s as simple as not using the Twenty Twenty theme or any child theme that depends on it, so you won’t be affected by the problem.

If you like it, you can always use the Chaplin theme, which is inspired by it, and which happens to not have this problem, because it loads another font that is included in the theme, and you can also change it to a system font (Arial, etc.) in the customizer.

And if not, you have a lot (thousands) of free themes that don’t have this problem.

Cancel the charge of the Twenty Twenty Inter font

If you want to continue using Twenty Twenty despite the problem, you can always cancel the loading of the Inter font and force your website to use system fonts, which all users will have on their computers.

To do this you will have to add the following to the functions.php file of the active theme:

add_action( 'wp_head', function() {
 ?>
 <style>
 body,
 input,
 textarea,
 button,
 .button,
 .faux-button,
 .wp-block-button__link,
 .wp-block-file__button,
 .has-drop-cap:not(:focus)::first-letter,
 .entry-content .wp-block-archives,
 .entry-content .wp-block-categories,
 .entry-content .wp-block-cover-image,
 .entry-content .wp-block-latest-comments,
 .entry-content .wp-block-latest-posts,
 .entry-content .wp-block-pullquote,
 .entry-content .wp-block-quote.is-large,
 .entry-content .wp-block-quote.is-style-large,
 .entry-content cite,
 .entry-content figcaption,
 .entry-content .wp-caption-text {
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif !important;
 }
 
 .widget_text p,
 .widget_text ol,
 .widget_text ul,
 .widget_text dl,
 .widget_text dt,
 .widget-content .rssSummary,
 .entry-content p,
 .entry-content ol,
 .entry-content ul,
 .entry-content dl,
 .entry-content dt {
 font-family: "Hoefler Text", Garamond, "Times New Roman", serif !important;
 }
 </style>
 <?php
}, 5 );
ExpandCode language: JavaScript (javascript)

In addition, you may also need to add the following in the additional CSS section of the customizer:

@supports ( font-variation-settings: normal ) {
 body,
 input,
 textarea,
 button,
 .button,
 .faux-button,
 .wp-block-button__link,
 .wp-block-file__button,
 .has-drop-cap:not(:focus)::first-letter,
 .entry-content .wp-block-archives,
 .entry-content .wp-block-categories,
 .entry-content .wp-block-cover-image,
 .entry-content .wp-block-latest-comments,
 .entry-content .wp-block-latest-posts,
 .entry-content .wp-block-pullquote,
 .entry-content .wp-block-quote.is-large,
 .entry-content .wp-block-quote.is-style-large,
 .entry-content cite,
 .entry-content figcaption,
 .entry-content .wp-caption-text {
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif !important;
 }
}
.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.widget-content .rssSummary,
.entry-content p,
.entry-content ol,
.entry-content ul,
.entry-content dl,
.entry-content dt {
        font-family: "Hoefler Text", Garamond, "Times New Roman", serif !important;
}Code language: CSS (css)

I know, it’s not a good habit to use !important but there’s no other way if you want to override the default behavior of the theme this time.

Twentig

Another possibility is to use the fantastic plugin called Twentig, which adds lots of customizations to the Twenty Twenty theme, including the possibility of changing the Inter source for another one, solving the problem.

It also offers a huge amount of customization for the theme. It’s been a real breakthrough.

Well, no matter how many options there are, but you know, as long as the problem is not fixed, don’t use the Twenty Twenty theme without applying one of these solutions!

Read this post in Spanish: ¡No uses el tema Twenty Twenty: ralentiza tu web!