[Resolved] More Google font embedding

Home Forums Support [Resolved] More Google font embedding

Home Forums Support More Google font embedding

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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)

    #1662122
    Leo
    Staff
    Customer Support
    #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/

    #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">.

    A wise man once said:
    "Have you cleared your cache?"

    #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

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

    A wise man once said:
    "Have you cleared your cache?"

    #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)

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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.