What you should know about the Twenty Twenty theme – and potential mobile speed problems.

We tested the Twenty Twenty default theme. We strip the theme and WordPress core, using our usual plugins. We describe that process in this video about the Twenty-nineteen theme:

REFERENCE: https://pagepipe.com/under-1-second-page-speed-with-twenty-nineteen-theme-and-heavy-video/

There is one gotcha we’ve never seen before. Read on.

In the Twenty-nineteen theme, the developers were kind enough to use a mobile system font stack. Great for speed. It’s a 385k zip file download.

But in Twenty Twenty, there’s a font in the stack called “Inter.” It’s a variable font. This isn’t an accepted technology yet. There are known issues with variable fonts in Chrome. In particular, on Microsoft Windows.

The request for “Inter Var” isn’t for a Google font. Inter font is a Google font now but still seeing the same troubles in speed waterfalls. Plugins can’t remove it. Nor is it a system font. We’re not sure why they used it except they thought it was cool. It’s a speed liability. To remove it, you have to add custom code to the customizer:

h1, h2, h3, h4, h5, h6, p {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans;
}

But even that custom CSS fails. To remove the 800-millisecond delay caused by this font, we deleted the code from the theme style.css file. Even if you use !important to force it.

---

We don’t appreciate being experimental guinea pigs for faddish slow font features like variable fonts.

After stripping the theme and core, load times on shared hosting are about a half-second. There are only 5 requests per page.

Adding Autoptimize plugin creates no gain in reducing the number of calls. jQuery is not activated by the theme. That’s a nice speed bonus.

Twenty Twenty theme is a 638k zip file download.

★ ★ ★ ★ ★
Twentig

Load Time: 140 milliseconds

We’re happy to report a plugin called Twentig is now available in the WordPress plugin directory for free. The plugin allows you to remove the Inter font eliminating the over 500-millisecond slowdown on all pages and posts. The lightweight plugin download folder weighs only 36k. Site drag is under 1 millisecond. Beautiful for speed. That stinking font is finally GONE! Fast system fonts instead.

Customizer > Twentig Theme Options > Fonts > Body Font > Select UI System Font

Here’s another great plugin to remove the dead-weight font:

https://wordpress.org/plugins/options-for-twenty-twenty/

What about the Chaplin theme?

Twenty Twenty is based on Chaplin, a theme with high flexibility and support for extreme customization.

Chaplin has a zip package download size of 1.2MB. Our cutoff for evaluation is 1 megabyte. It smells sort of interesting. The biggest heavy boat anchor is including Font Awesome. That’s bad for speed. If they left that out, the theme has real speed possibilities. Test results:

Pingdom SF: 118k, 526ms, and 10 requests.

That is with loading Merriweather – the theme default Google font. But you can change the font to Arial in the Customizer. Or leave the two font fields blank and then a mobile font stack is used. That’s the best choice. It should be the default. And the theme loads jQuery globally. Not a good choice either. But livable since many plugins activate jQuery, also.

Activating Autoptimize plugin took the Chaplin theme test results down to:

71k, 461ms, and 7 requests.

We observe that Font Awesome is not enqueued by default. But from experience – if it’s used even once – it globally loads at least 75k on every page. So avoid that trap.

Of the two themes, we prefer Twenty Twenty with Inter font defeated in CSS for speed.

But Chaplin has beautiful Customizer features like:

• disabling comments
• default related posts
• deactivating author and date metas (for evergreen content).

Very nice and tempting.

We like what we see in Chaplin. We’re impressed. It’s an underrated theme. Lots of nice features eliminate extra plugins reducing the speed overhead.

---

Addendum

I wanted to thank you for the article you wrote about the new WP 2020 theme. It’s the only article I’ve found really talking about the speed issue with the Inter Var font.

I tried deleting the font settings on Line 253. However, I see multiple other instances where inter-var shows up in the code. (It seems like deleting line 253 may have interfered with some automatic color-adjustment when using a color background.) Is there a straightforward way to removing the Inter Var font? Thanks again!  PS- The Woo Storefront theme (which was very customizable and still highly limited) was much faster than 2020. My dad even said “huh, your site is noticeably slower on mobile” and he’s not a tech guy at all. —Travis Burch

To remove it, we used the WordPress Theme Editor. (Appearance > Edit Theme > style.css).

We tried using the Customizer to change the CSS. It didn’t work for us. We don’t know why. That’s abnormal. Everywhere font-family: “Inter var” exists has to be manually removed.

When the theme updates that junk returns to the code. Annoying. There are ways to prevent updates with a plugin. That would be a clunky workaround.

For this reason, we now think Twenty-twenty theme sucks for speed. But were still experimenting.
OFFSITE LINK: https://www.machmetrics.com/speed-blog/average-page-load-times-for-2020/