Additional Astra Font Swap Troubleshooting

“View and resolve Astra Font Swap official documentation”

When I first started WordPress, I preferred themes that had a lot of functions and were like news sites. However, the PageSpeed Insight test was conducted, and it was changed to Astra theme due to the slow speed.

However, since the Font Swap problem that was solved in the previous theme was found, I looked it up on the official site and found that Astra Font Swap problem was not difficult to solve by adding a simple code.

I’m sure some of you are wondering what the Astra Font Swap problem is. I’ve written an article about how to solve this problem, and I’m explaining to you that Explorer uses the FOUT method, but other browsers use the FOIT method, so the font may flash, so change it to the FOUT method.

Astra Font Swap

If you look at Naver’s official explanation, you’ll find out more about it, so please refer to the article <Browser’s Rendering Blocking Processing Method>.

  • Flash Of Unstyled Text (FOUT): Render text with fallback fonts until the Web font is loaded in a manner used by Explorer family browsers.
  • Flash Of Invisible Text (FOIT) : does not show the text on the screen until the Web font is loaded, such as Firefox, Chrome, etc.

As you can see above, if you use a browser like Chrome or Firefox that uses FOIT, the text will not be visible until the Web font is loaded, so the font may flash when it is loaded.

That’s why we need to set it up in the FOUT method to reduce loading time and solve the font flashing phenomenon. If you’re using a different theme, please refer to the Font Swap PageSpeed Insight solution article and if you’re using Astra theme, please read the article below to solve it.

1. Astra Font Swap Help

Astra Font Swap

If you go to the Astra Theme official site, you can see a variety of documentation, where you can see the article titled Modify Font-display Property Value, and see how to solve the Astra Font Swap problem.

It’s in English, so you might not know what it means, but if you translate it into Chrome, you should add the above code to the Functions.php file.

But if you look at this, you won’t know where and how to do it if you’re a beginner, but we’ll find out where to add the code on WordPress.

2. Add Functions.php Code

Astra Font Swap

Go into WordPress Manager, click Theme Design, and you’ll see the Theme Editor. You can go in here.

Astra Font Swap

After entering the theme editor, click functions.php on the right to open it. Then scroll down to the bottom and paste the code below.

add_filter( ‘astra_fonts_display_property’, ‘astra_replace_fallback_with_swap’ );

function astra_replace_fallback_with_swap( $property ) {

$property = ‘swap’;

return $property;

}

Astra Font Swap

Paste the code above and it will look like the one above. Then click the Update File button at the bottom to save.

This will solve the Astra Font Swap issue, rather than external content like AdSense. If you use other themes, it is difficult to solve without a manual, but the Astra theme has good help, so you will be able to solve other problems without difficulty.

PageSpeed ​​Insight cannot be an absolute rating on the site, but it’s something Google tells you, so it’s a good idea to fix any issues that arise.

▶ Sites and plug-ins where broken link can be found

▶ How to use the reanslation plugin Polylang

Leave a Comment

Your email address will not be published.