[Support request] Google Font to select from the typography menus?

[Ulrich]

Hi,

in an WP Site with GeneratePress Premium as Theme I would like to use a Google font (Piazolla) for the title (but not for the subtitle). The best would be to get this font added to the font-selection-menus, which I get in the costumizer for typography. There are some Goggle fonts, but not the Piazolla.

What to do?

Thanks a lot!
Ulrich

[David]

Hi there,

this article provides the PHP Snippet required to add a google font to the Customizer list:

https://docs.generatepress.com/article/generate_typography_default_fonts/

[Ulrich]

That’s perfect, I got the Piazolla in the selection menu.

But unfortunately the selected font isn’t shown corectly in the frontend browser. To be more precise: in the chromium browser I get the right font, but not in firefox and even not in the safari.

Yes, that is another question, but may be I get help again here?

Greetings
Ulrich

[David]

Can you share a link to the site so we can see what the issue is?

[Ulrich]

logos-2022.org

We just talk about the word “LOGOS” at the top of the Site. All other text should use another font, Ubuntu.

[David]

I think its a spelling mistake in your font name, it should be:

Piazzolla

If this is the correct font:
https://fonts.google.com/specimen/Piazzolla?preview.text_type=custom

[Ulrich]

Sorry for wasting Your time with errors like this…

Thank You very mutch!

[David]

No apologies necessary … glad to be of help!

[Ulrich]

One more question came up: the (wrong) spelling solved the problem for firefox and chromium (both running on Linux), but not for a safari – a friend told me that. Is that possible? Sie the three screenshots in our nextcloud:
https://cg-2022.org/nc/index.php/s/W5ozWY6qKZGptSb

Ulrich

[David]

Can you link me to the site i can check on Safari

[Ulrich]

logos-2022.org

[David]

I am not seeing the font loading on any device.
The issue is that the Font is a Variable font and cannot be simply loaded by the Customizer.
Leave the settings and the functions you have so far.
Then add this snippet:

add_action('wp_head', function() {
	?>
	<link href="https://fonts.googleapis.com/css2?family=Piazzolla&display=swap" rel="stylesheet">
	<?php
});

[Ulrich]

O.k., I added that (I do that using the WP Plugin Code Snippets. What I now have there is:

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'Piazzolla';
    return $fonts;
}

add_action('wp_head', function() {
	?>
	<link href="https://fonts.googleapis.com/css2?family=Piazzolla&display=swap" rel="stylesheet">
	<?php
});

To avoid a missunderstanding: there is only one single word on the site which uses the Piazzolla: That’s LOGOS at the top of the site.

[David]

That worked 🙂

I can see the font on Safari, Chrome and Firefox:

[Author]

Posts