Google Font to select from the typography menus?

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/

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

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

logos-2022.org

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

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

Sorry for wasting Your time with errors like this...

Thank You very mutch!

No apologies necessary ... glad to be of help!

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

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

logos-2022.org

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
});

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.

That worked :)

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

https://www.screencast.com/t/hvlbYCmbcOx