The Astra theme, apart from being one of the most popular WordPress themes, stands out for its speed, outperforming most of the other themes, but there are still things that can be improved.
One of these things to improve is to change the way Astra loads fonts on your website.
By default, the Astra theme uses the fallback parameter for the font-display property, which defines how fonts are loaded and displayed in the browser.
With this parameter the browser will hide the text for about 100 milliseconds and, if the font has not yet been downloaded, an alternative font will be used. It will switch to the new font when it is downloaded, but only for a short swap time, around 3 seconds.
Alternatively, with the swap parameter, the browser is instructed to use the fallback font to display text until the custom font has completely downloaded. This is also referred to as “flash of unstyled text” or FOUT.
If we compare the loading behavior of your pages with both parameters we have the following:
| Lockout period | Exchange period | |
| swap | None | Infinite |
| fallback | Very low | Low |
Although there are better ways to optimize the loading of web fonts when optimizing your website the parameter, the swap parameter does not block the loading of your pages while the fonts are loading, which will result in better scores in the optimization analysis, for example from Core Web Vitals.
Given the technical explanation of why it is better to use swap than fallback, if you want to apply this optimization to the Astra theme just add the following code to the end of the functions.php file of the Astra child theme:
/* Optimize loading of Astra fonts */
add_filter( 'astra_fonts_display_property', 'astra_replace_fallback_with_swap' );
function astra_replace_fallback_with_swap( $property ) {
$property = 'swap';
return $property;
}Code language: PHP (php)Save the changes, clear caches if you have them active, and check that the change has been made by looking in the source code (right click + View page source) of your pages for the font-display property to check that it uses the swap parameter.
It will have changed from font-display:fallback to font-display:swap and will improve your load times and score in the vital web metrics scores (you know, the core web vitals).
