Archived topic
Adding Google Fonts Locally
9 replies · Started by Jose on July 5, 2021
Hi there,
I added the Heebo and Lora fonts locally according to this article: https://docs.generatepress.com/article/adding-local-fonts/ in order to remove the Google Fonts request and thus increase page speed on my blog. After doing so and adding the PHP snippet in this article https://docs.generatepress.com/article/remove-google-fonts/ to ensure it doesn't make the Google Fonts request, I'm still seeing the request being made on Page Speed Insights and I don't know why. A link to the site in question is in the private info field. Thanks.
Hi Jose,
The request is coming from a GenerateBlocks block.
Check for any GB block that has this enabled under its typography tab - https://share.getcloudapp.com/rRujmyn9
Hi Elvin,
I found one GB block that had it enabled (The footer built with GenerateBlocks) and disabled it, but other than that I haven't found any other blocks that have it and the request still shows up in PSI.
I don't see the page actually loading any external fonts - https://share.getcloudapp.com/rRujmy1w
I see 4 loading fonts but all of them are coming from /wp-content/uploads/ meaning it's all from local fonts.
I've checked Google PSI report on your site and if you're pertaining to this - https://share.getcloudapp.com/mXurvdYQ
The solution is to add font-display: swap; CSS property to your @font-face CSS.
I don't know why but I'm still getting the Google Fonts request on PSI. I've put a screenshot in the private info field. PSI says I have some Playfair Display font on the blog post that is causing the request, but that font does not exist anywhere in my post or site, so I'm clueless.
Also, how can I add the font-display: swap; CSS property to my @font-face CSS? Where exactly should I add it in the Customizer? Thanks.
Ah this is still from Generateblocks - https://share.getcloudapp.com/WnuxpeQZ
I dug around a bit more and found this - https://share.getcloudapp.com/jkuP6r7e
It's one of the container blocks from one of your Block Elements hooked to footer.
Also, how can I add the font-display: swap; CSS property to my @font-face CSS? Where exactly should I add it in the Customizer? Thanks.
You basically edit the @font-face CSS you've added. You include it like how you include any CSS properties.
Example: For roboto 100 weight, normal.
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('url of font file here') format('woff2');
}Thanks Elvin, eliminating that container in the footer worked (almost). Now PSI is showing the Fonts request for another font, the Lora font, which is the one that I have already added locally so I don't know what might be causing the request. Let me know.
These two are using Lora for its font.
https://share.getcloudapp.com/YEuZzN2y
I think the author box is the one making the request but make sure to check the navigation as well.
Great! It worked. I'm finally free from that annoying Google Fonts request in PSI lol. Thanks Elvin.
No problem. Glad to be of any help. :D
