[Support request] Remove Google Fonts

[Eroan]

Hi David,

This helps, thanks.

But if you could publish an example of actual working hook to generate_font_manager_system_fonts that would be the best help you could provide me with.

If I understand well, this is a JS hook, not a php hook ?

I would be tempted to do :

function generate_font_manager_custom_system_fonts(  ) {
    return array('Font 1' => 'Font 1', 'Font 2' => 'Font 2', 'Font 2' => 'Font 2');
}
add_filter( 'generate_font_manager_system_fonts', 'generate_font_manager_custom_system_fonts' );

Am I right or wrong ?

Thanks.

[David]

I have asked Tom or Jean to write up an example, ill post a link here when they have done so.

[Tom]

Since this is a JS filter things are a little different.

For example:

add_action( 'customize_controls_print_footer_scripts', function() {
	?>
	<script>
		wp.hooks.addFilter(
			'generate_font_manager_system_fonts',
			'your/namespace',
			( $fonts ) => [
				{ value: 'Test', label: 'Test Font' },
				{ value: 'Another', label: 'Another Font' },
			]
		);	
	</script>
	<?php
} );

Also, 3.2.0 is currently still in heavy development, so you may encounter some bugs if you’re using that version.

[Eroan]

Hi Tom, thanks a lot for your example, this is gold for me 🤩

Looking forward to seeing 3.2 showing itself in changelogs 👍🏻

Edit : what am I supoposed to add in “your/namespace” in order to be sure it works out of the box ?

Thanks.

[Tom]

That’s something unique to you – it can be anything. For example: project-name/function-purpose

Glad I could help!

[Eroan]

Hi Tom,

Glad to see GP 3.2 coming live today ❤️

Everything works just as expexted regarding custom webfonts, this is huuuge thanks.

What is the recommended way for deactivating Google Fonts with this new version ? I have both my “System fonts” and “Google Fonts” in the typography selector.

Many many thanks 👏🏻

[Tom]

Hi there,

You should just be able to do this:

add_filter( 'generate_font_manager_show_google_fonts', '__return_false' );

Let me know 🙂

[Eroan]

Thanks Tom,

And that’s another step that works just as expected, I now have my custom fonts only which is great 👏🏻

The last step to this new journey is to get the webfonts used on pages. I used this before, but it does no longer work :

//-----------------------------------------------------
// Get fonts used in GP
//-----------------------------------------------------

function generatepress_child_active_fonts()
{
    if (!function_exists('generate_get_default_fonts')) {
        return array();
    }

    $settings = wp_parse_args(
        get_option('generate_settings', array()),
        generate_get_default_fonts()
    );

    // Détection de la version 3 avec Font Manager
    if(isset($settings['font_manager']) && isset($settings['typography'])){

        $used_fonts = wp_list_pluck($settings['typography'], 'fontFamily');

    } else {

        $used_fonts = array(
            $settings['font_body'],
            $settings['font_top_bar'],
            $settings['font_site_title'],
            $settings['font_site_tagline'],
            $settings['font_navigation'],
            $settings['font_widget_title'],
            $settings['font_buttons'],
            $settings['font_heading_1'],
            $settings['font_heading_2'],
            $settings['font_heading_3'],
            $settings['font_heading_4'],
            $settings['font_heading_5'],
            $settings['font_heading_6'],
            $settings['font_footer']
          );
        
    }

    return array_unique($used_fonts);
}

//-----------------------------------------------------
// List of local custom fonts
//-----------------------------------------------------

function generatepress_child_local_fonts()
{
    return array(
      'Albert Sans' => 'albert-sans',
      'Archivo' => 'archivo',
      'Barlow' => 'barlow',
      'Bitter' => 'bitter',
      'Centrale Sans' => 'centrale-sans',
      'Coda' => 'coda',
      'Core Sans' => 'core-sans',
      'Crimson Text' => 'crimson-text',
      'Jost' => 'jost',
      'Lato' => 'lato',
      'Lexend' => 'lexend',
      'Lexend Deca' => 'lexend-deca',
      'Lora' => 'lora',
      'Montserrat' => 'montserrat',
      'Old Standard TT' => 'old-standard-tt',
      'Open Sans' => 'open-sans',
      'Oswald' => 'oswald',
      'Outfit' => 'outfit',
      'PT Serif' => 'pt-serif',
      'Playfair Display' => 'playfair-display',
      'Poppins' => 'poppins',
      'Questrial' => 'questrial',
      'Raleway' => 'raleway',
      'Red Hat Display' => 'redhat-display',
      'Righteous' => 'righteous',
      'Roboto' => 'roboto',
      'Titillium Web' => 'titillium-web',
      'Urbanist' => 'urbanist',
      'Vollkorn' => 'vollkorn',
    );
}

//-----------------------------------------------------
// Load active custom fonts
//-----------------------------------------------------

add_action('wp_enqueue_scripts', 'generatepress_child_enqueue_local_fonts', 2);
function generatepress_child_enqueue_local_fonts()
{
    $active_fonts = generatepress_child_active_fonts();
    $local_fonts = generatepress_child_local_fonts();
    foreach ($active_fonts as $font_name) {
        if (!empty($font_name) && array_key_exists($font_name, $local_fonts)) {
            wp_enqueue_style('local-fonts-'.$local_fonts[$font_name], get_stylesheet_directory_uri() . '/css/local-fonts-'.$local_fonts[$font_name].'.css', array(), gp_c_version);
        }
    }
}

Many thanks.

[Tom]

If that solution was working it should continue to work as always.

You would have to debug in your generatepress_child_enqueue_local_fonts() function. Does $active_fonts output anything? What about $local_fonts etc…

Also, be sure to use a different function prefix other than generatepress_ just in case we use one of those function names in the future 🙂

[mkjj]

Could somebody help me understanding the original question? I’m still not getting what’s the goal here. I usually dequeue all Google fonts that might be included by Generatepress and add the fonts locally through the child theme. This does the trick easy and straightforward. If customers need to change any fonts they have to learn the workflow or ask somebody to do that for them.

@Eroan: Do you want the fonts to be automatically included locally depending on the customizer settings?

Thanks, Mike

[Eroan]

Hello Tom,

Thanks for your answer. I identified the change, it’s related to the font names, so nothing by your side.

I’m using generatepress_child_ prefix, this should be ok I guess 🙂

@mkjj The idea is to provide local hosted, lightweight and optimized webfonts instead of Google Fonts.

[mkjj]

The idea is to provide local hosted, lightweight and optimized webfonts instead of Google Fonts.

Yes, I know. I do this for all customer sites. However, what’s wrong with the good old dequeue? I’m probably a bit slow here. 🙂

[Eroan]

The idea is to have it already prepared 😉

@Tom I made the modifications I needed and there is an unexpected behavior : when a custom webfont has the same name as a Google Font, it automatically activates it as a Google Font !

And since I deactivated them, I have a JS error in the console and a non functional Customizer :/

The only workaround is, then, to reactivate Google Fonts which will then only allow to (un)toggle the “Use Google Fonts API” option.

I let you reproduce the process, it’s quite easy.

Thanks.

[Tom]

Just released 3.2.1 which should fix this 🙂

[Eroan]

Hi Tom, thanks so much for the quick fix release.

I confirm that, now, everything works just as expected 🙂

[Author]

Posts