Skipping the loading of woff2 fonts via WordPress on the Full Site Editor is pretty easy, especially on a great and moder theme like TwentyTwentyFour. This will allow you to clean up some calls to @font-face you are not using and improve the performance of your website.
@font-face{font-family:Inter;font-style:normal;font-weight:300 900;font-display:fallback;src:url('https://yoursite.ai/wp-content/themes/twentytwentyfour/assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:Cardo;font-style:normal;font-weight:400;font-display:fallback;src:url('https://yoursite.ai/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_normal_400.woff2') format('woff2');}
@font-face{font-family:Cardo;font-style:italic;font-weight:400;font-display:fallback;src:url('https://yoursite.ai/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_italic_400.woff2') format('woff2');}
@font-face{font-family:Cardo;font-style:normal;font-weight:700;font-display:fallback;src:url('https://yoursite.ai/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_normal_700.woff2') format('woff2');}
As you can see below, these default fonts are pretty heavy and nearly useless:
Here’s how you can remove them this in just a few clicks:
- Open Full Site Editor: The first thing you need to do is open your Full Site Editor in WordPress.
- Fonts and Typography: You can now proceed to the section named “Fonts” or “Typography” through your sidebar.
- Untick Cardo and Inter: Untick both Cardo and Inter in case they are not in use currently in the design you are working on.
- Save Changes: Save to have @font-face calls to those fonts removed.
- It pays off particularly well with the TwentyTwentyFour theme, which is very seamless. It can often contribute to some improvement in load times and even creates a more fluid experience for your visitors if you take out fonts that aren’t being utilized.
Once you have cleaned them up and replaced with lightweight Sans-serif and Serif system fonts your panel should look as above.
If you do this, you can gain 20 to 30 mobile points on PageSpeed Insights!