Archived topic
Help Loading Fonts Locally
7 replies · Started by Anthony on March 2, 2021
Hello there, Having trouble loading google fonts locally. I can't seem to get them to go away when I do tests in Google Pagespeed Insights or GT Metrix. I'm pretty sure I've successfully loaded the fonts since they all show up in the customizer under system fonts. And, I removed the Google fonts from the customizer also.
I followed this guide here: https://docs.generatepress.com/article/adding-local-fonts/
Here's the PHP I have in place:
/*** Add Local Loaded Fonts to Customizer */
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Merriweather';
$fonts[] = 'Cabin Condensed';
return $fonts;
} );
/*** Removing Google Fonts */
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'generate-fonts' );
} );
add_action( 'admin_init', function() {
add_filter( 'generate_google_fonts_array', '__return_empty_array' );
} );
Here's my CSS:
/* merriweather-regular - latin */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fontsmerriweather-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/merriweather-v22-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* cabin-condensed-700 - latin */
@font-face {
font-family: 'Cabin Condensed';
font-style: normal;
font-weight: 700;
src: url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/cabin-condensed-v14-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/cabin-condensed-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/cabin-condensed-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/cabin-condensed-v14-latin-700.woff') format('woff'), /* Modern Browsers */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/cabin-condensed-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.projectdreamnh.org/wp-content/themes/generatepress_child/fonts/cabin-condensed-v14-latin-700.svg#CabinCondensed') format('svg'); /* Legacy iOS */
}
The fonts are all chosen in the customizer under system fonts.
Not sure if I need to do anything else?
Thank you!
Hi there,
I've checked your site and it actually seems like its using Cabin Condensed and Merriweather as shown here. https://share.getcloudapp.com/E0u9Jnpr
I'm just not sure if that's from Google fonts from the customizer or your locally added font.
Can you temporarily disable caching/optimization plugins so we could check how the fonts are being loaded?
Thanks, Elvin
So ya the fonts across the website are all showing correctly I just can't figure out the website is still calling Google for the fonts when I thought the PHP Function removed them?
I've removed the caching plugins for now.
Thanks SO MUCH!!
Best,
I don't see the generate-fonts so that means your dequeue script works.
Here's what I see instead.
https://share.getcloudapp.com/v1uN9Nb9
I'm not sure what this is from but it's definitely not from GeneratePress.
Hmm ya that's my Siteorigin pagebuilder.
I wonder if one of the widgets is using a google font? Would that be doing that maybe?
I wonder if one of the widgets is using a google font? Would that be doing that maybe?
I'm not exactly sure but if any of its widgets has a typography setting, it's most likely that as not having one will mean the typography options won't actually display the desired font as the selected font isn't imported. :)
I was able to find the proper function from the SO support.
Thanks!
Nice one. Thank you for letting us know. Glad you got it sorted. :D