[Resolved] Help Loading Fonts Locally

[Anthony]

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!

[Elvin]

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?

[Anthony]

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,

[Elvin]

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.

[Anthony]

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?

[Elvin]

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. 🙂

[Anthony]

I was able to find the proper function from the SO support.

Thanks!

[Elvin]

Nice one. Thank you for letting us know. Glad you got it sorted. 😀

[Author]

Posts