More Google font embedding

This topic has 7 replies, 3 voices, and was last updated 3 years, 2 months ago by Elvin.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 17, 2021 at 1:32 am #1661370
Matthew
In a Hook Element set to the wp_head I have put this code to embed the Google font
```
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 
```
I have more fonts I want to use so are these just added on below i.e.
```
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 
```
(Assuming the second is actually a different font)
February 17, 2021 at 10:11 am #1662122

Leo
Staff
Customer Support

Hi there,

Does this article help?
https://docs.generatepress.com/article/customizing-the-google-font-list/

Let me know 🙂

February 17, 2021 at 8:19 pm #1662618

Matthew

Doesn’t that simply add another google font to the Customizer font list? Even if I do that the font isn’t available for use (beyond the customizer) unless it’s selected in the customizer. I want to add a font with the method in my first post, so I can use it in my CSS.

https://generatepress.com/forums/topic/roboto-slab-google-font-used-in-css-not-displaying/

February 17, 2021 at 8:36 pm #1662626
Elvin
Staff
Customer Support
Hi there,

The snippet here – https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list – also adds in the appropriate requests for the selected font from Google font server.

Say for example, you want Long Cang font – https://fonts.google.com/specimen/Long+Cang?preview.text_type=custom

You can do something like this:
```
add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'long_cang' ] = array( 
		'name' => 'Long Cang',
		'variants' => array('400'),
		'category' => 'cursive'
	);
	
	return $fonts;
}
```
Doing this adds “Long Cang” to the customizer font lists and ALSO adds in the appropriate requests on the <head> of the site which is this one <link rel="stylesheet" id="generate-fonts-css" href="//fonts.googleapis.com/css?family=Long+Cang:400" media="all">.
February 17, 2021 at 11:45 pm #1662717
Matthew
This sounds promising but I haven’t been able to get it to work yet.

So I had that Hook Element mentioned in my original post shown again below:
```
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
```
Which embedded the Google font and worked with success using this CSS:
```
.entry-content {
    font-family: 'Zilla Slab', serif;
    font-weight: 500;
    font-size: 23px;
}
```
After your advice I deleted the above Hook Element but kept the CSS. To check then refreshed my blog on the front end the Zilla Slab is gone which is correct (replaced with a generic font such as Times).

Next excitedly added a new Snippet as below:
```
add_filter( 'generate_typography_customize_list', 'tu_add_google_fonts' );
function tu_add_google_fonts( $fonts ) {
	$fonts[ 'zilla_slab' ] = array( 
		'name' => 'Zilla Slab',
		'variants' => array( '300', '300i', '400', '400i', '500', '500i', '600', '600i', '700', '700i' ),
		'category' => 'serif'
	);
	
	return $fonts;
}
```
But the generic font is still there. Am I missing some aspect
February 18, 2021 at 1:18 am #1662788

Elvin
Staff
Customer Support

Ahh I see what you mean now.

I misunderstood what you meant on your previous point.

You were actually trying to import a font without calling it from the customizer.

If that’s the case, then this – <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> is the actual way to go.

Or alternatively, if you’re planning to host the font locally, you do this:
https://docs.generatepress.com/article/adding-local-fonts/

Which is basically asking for @font-face import pointing to the url of a font file.

February 18, 2021 at 1:43 am #1662810

Matthew

So can we confirm the following:

1) If I want to use a google font (but I don’t want to use it anywhere in the customizer) then I need to stay with my wp_head hook element I showed in my original post?

2) If point 1 above is true, and to return to my original question of this post, how do I add more fonts? (please see my first post)

February 18, 2021 at 2:38 am #1662873

Elvin
Staff
Customer Support

1) If I want to use a google font (but I don’t want to use it anywhere in the customizer) then I need to stay with my wp_head hook element I showed in my original post?

Yes, you hook in the <link> tag for specific custom requests outside of the customizer.

2) If point 1 above is true, and to return to my original question of this post, how do I add more fonts? (please see my first post)

You can use a single <link> tag for multiple font requests.

Example: Request for Long Cang, Bad Script and Crimson Text.

<link rel="stylesheet" id="generate-fonts-css" href="//fonts.googleapis.com/css?family=Long+Cang:400|Bad+Script:regular|Crimson+Text:regular,italic,600,600italic,700,700italic" media="all">

The requests are separated with |.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] More Google font embedding

Popular Articles

Start building better websites today.