How to edit @font-face style for a theme in Wordpress?

Avatar
amanda ruggeri
  • updated
  • Answered

Hi all,

I have been running some diagnostics on my site and it's coming up very slow. One thing that's recommended is to "ensure text remains visible during webfont load - Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading." Google says that "The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers", and then gives the code. 

However... where do I put this code in? I've never screwed around with PHP and don't really understand how to do it. I tried going into "Edit themes" to edit the HTML stylesheet for my theme on Wordpress, but when I added that code it didn't seem to do anything (it didn't break the site either, so that's something). Can anyone advise?

Thanks,

Amanda

Pinned replies
Avatar
0
anonymous
  • Answer
  • Answered

Hi, Amanda! I did some research on the issue and came up with two different approaches. 

The direct, simple, 'WordPressy' style answer: find out if your theme is using Google fonts or another font from somewhere else. If it's Google, consider a plugin like this one which solves the issue you are discussing. If not, you may need to look for a different plugin. Just to note, this isn't an official IMH recommendation, just a relevant third party plugin I found while investigating the issue. 


Slightly more complicated version:  The developer of the above plugin has an excellent walkthrough on the process. The plugin  essentially automates that change to Google Fonts. 

This is all going to be in WordPress under Appearance, usually in Themes or Customize depending (some themes and plugins can put things in unusual places, the font that's slowing things down may actually be tied to a plugin, etc.). 

Based on your description above, it sounds like you either added the code by itself or added it to the theme in general. What usually happens is that there is a particular plugin, field, or somewhere else unusual using one of these proprietary fonts. You'll need to track that down and edit it directly. 


I hope that helps put you in the right area of WordPress for the problem. Anything beyond that is going to be a developer issue, and I'd suggest running it by your WordPress developer or contacting our Managed Hosting team. I would definitely suggest making backups before doing this, and trying it out on a cloned or demo site using the same themes/plugins as your main site, first. Hope that helps!

Replies 1
Avatar
0
anonymous
  • Answer
  • Answered

Hi, Amanda! I did some research on the issue and came up with two different approaches. 

The direct, simple, 'WordPressy' style answer: find out if your theme is using Google fonts or another font from somewhere else. If it's Google, consider a plugin like this one which solves the issue you are discussing. If not, you may need to look for a different plugin. Just to note, this isn't an official IMH recommendation, just a relevant third party plugin I found while investigating the issue. 


Slightly more complicated version:  The developer of the above plugin has an excellent walkthrough on the process. The plugin  essentially automates that change to Google Fonts. 

This is all going to be in WordPress under Appearance, usually in Themes or Customize depending (some themes and plugins can put things in unusual places, the font that's slowing things down may actually be tied to a plugin, etc.). 

Based on your description above, it sounds like you either added the code by itself or added it to the theme in general. What usually happens is that there is a particular plugin, field, or somewhere else unusual using one of these proprietary fonts. You'll need to track that down and edit it directly. 


I hope that helps put you in the right area of WordPress for the problem. Anything beyond that is going to be a developer issue, and I'd suggest running it by your WordPress developer or contacting our Managed Hosting team. I would definitely suggest making backups before doing this, and trying it out on a cloned or demo site using the same themes/plugins as your main site, first. Hope that helps!