New to the community? Start here

Fixing Google Fonts lacking font-display swap

Google Insights are still showing Ensure text remains visible during webfont load suggestion after installing a plugin that should add font-display: swap to the Google Font requests.

Tue, 31 Mar 2020 5:34:40

Predrag Dubajic
- Support
- 4,417 pts: Hero points 32,655 pts: Rep. points LEVEL 30
Hi Charles,

It seems that the report is coming from your theme fonts still not using swap, can you try creating a child theme and in child theme style.css file add this code:
```
@font-face {
  font-family: 'Libre Franklin';
  font-display: swap;
}
```
Let us know if that does the trick for you.

Best regards,
Predrag
Charles Davenport
- Design Lord, Child of Thor
- 74 pts: Hero points 83 pts: Rep. points LEVEL 3
No change. Just to make sure I am doing this correctly this is what my style.css looks like:

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 2.2.1585672501
Updated: 2020-03-31 16:35:01

*/
@font-face{
font-family: ‘Libre Franklin’;
font-display: swap;
}

Please note that when I entered the code you suggested, I got an error (!) Unknown Property ‘font-display’

I am also curious because in Hummingbird performance test audit it says this:

To add the font-display property for Google Fonts, you can pass the desired value in the query string display parameter as shown in the example below:

https://fonts.googleapis.com/css?family=Roboto&display=swap

Does this need to be addressed in the child theme somewhere?
Charles Davenport
- Design Lord, Child of Thor
- 74 pts: Hero points 83 pts: Rep. points LEVEL 3
That was the solution. I added https://fonts.googleapis.com/css?family=Roboto&display=swap to the functions.php file of the parent theme (https://fonts.googleapis.com/css was already there, I just added the remainder to the tail end) and the issue was solved.
Mohammad
- WPMU DEV Initiate
- 1 pts: Hero points 15 pts: Rep. points LEVEL 1
Hi Charles Davenport. I have the same problem. Can you say exactly where you pasted that expression functions. php file. I don’t have anything like it, so not sure where to insert it.
Mohammad
- WPMU DEV Initiate
- 1 pts: Hero points 15 pts: Rep. points LEVEL 1
Hi again, Charles Davenport. To just to provide more details, this is the list of font urls I am getting as problem. Can you instruct how I can modify that string as well for the fonts listed (and where to insert it in the functions.php file of the master theme. Thanks.

https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2 3 ms
https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2 3 ms
https://www.okcir.com/blog/wp-content/themes/mh-magazine/fonts/fontawesome-webfont.woff2?v=4.7.0 89 ms
https://fonts.gstatic.com/s/opensans/v17/mem6YaGs126MiZpBA-UFUK0Zdc1GAK6b.woff2 3 ms
https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2 4 ms
https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2 3 ms
https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2
Charles Davenport
- Design Lord, Child of Thor
- 74 pts: Hero points 83 pts: Rep. points LEVEL 3
I use Filezilla to edit files. As you can read from my reply I just found https://fonts.googleapis.com/css in my functions.php file and then added the extra text to the end of that. Not sure if that helps but that is what I did.
Mohammad
- WPMU DEV Initiate
- 1 pts: Hero points 15 pts: Rep. points LEVEL 1
Thanks Charles. The problem for me was that I did not have that half of the string in my functions.php file to begin with, so was not sure where and how to add things. Any ways. Thanks for getting back to me.

How do you rate me?

Thank you for rating your experience!