[Resolved] How to use two different fonts in two different pages?

Home Forums Support [Resolved] How to use two different fonts in two different pages?

Home Forums Support How to use two different fonts in two different pages?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1455726
    Chaitanya

    Hi GP Team,

    I want to use different google fonts in my site (One in homepage and Other in rest of pages). I’ve followed one approach, it is working but all font-weights are not loading.

    I am not able to use any other font weight rather than normal and bold, it is making font bold though font-weight: 600; is given.

    add_filter( 'generate_typography_google_fonts','generate_add_more_fonts' );
    function generate_add_more_fonts( $google_fonts )
    {
    	return $google_fonts . '|Nunito|Lato';
    }

    Could you please help me out to get all the font-weights.

    Also, please suggest me a better approach rather than this if any.

    From Google Fonts:
    <link href=”https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap&#8221; rel=”stylesheet”>

    Thanks in advance.

    #1455731
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1455743
    Chaitanya

    Hi Leo,

    Thanks for the quick response. Attached my site. Please have a look.

    #1455827
    Leo
    Staff
    Customer Support

    Little bit confused.

    I’m seeing this CSS:

    .home {
        font-family: Nunito, sans-serif;
    }

    What if you just do this?

    .home {
        font-family: Nunito, sans-serif;
        font-weight: 600;
    }
    #1456215
    Chaitanya

    Hi Leo,

    Sorry, it’s a bit confusing one. I want to make some headings as semi bold and some as bold.

    I tried your solution earlier, but i didn’t see any difference between font-weight: 600; and font-weight:bold;.

    #1456287
    Leo
    Staff
    Customer Support

    That CSS would work for body font and not for headings.

    Can you let me know the exact heading (which page and which text) you are trying to change?

    #1456305
    Chaitanya

    In Home page (front-page), I want to change all h3 & h4 headings as semi bold.

    #1456336
    Leo
    Staff
    Customer Support

    Would this work?

    body.home h3 {
        font-weight: 600;
    }
    #1456352
    Chaitanya

    Tried it and I cannot see any difference between font-weight:600 and font-weight: bold.

    I’m using Nunito font in home page which is different from all other pages.

    I’m not sure whether I followed the correct approach or not. Please let me know if any other way to use two different fonts in a site.

    Thanks

    #1456360
    Elvin
    Staff
    Customer Support

    Hi Chaitanya,

    Can you check Appearance > Customize > Typography > Body?

    I believe Nunito is assigned but, do you see other variants added such as these?
    https://share.getcloudapp.com/Kouwxpj8

    I’ve been testing your site and notice that only 2 font weight seems to work. 600 and the normal one.

    Perhaps other variants were excluded here.

    I believe adding variants here will let you have more options.

    Can you try adding 500(usual weight for semibold) and 700(usual weight for bold)?

    After adding, we can then assign font-weight:500; to h3 & h4 and font-weight:700; to h2 for significant visual weight distinction.

    #1456361
    Chaitanya

    Hi Elvin,

    In Appearance > Customize > Typography > Body,

    I’ve used Lato. I want lato in all other pages except home page. But in home page I want Nunito font with all font-weight variants.

    I’ve followed the below approach to do so but unfortunately it’s not working for all the font-weight variants.

    add_filter( 'generate_typography_google_fonts','generate_add_more_fonts' );
    function generate_add_more_fonts( $google_fonts )
    {
    	return $google_fonts . '|Nunito|Lato';
    }

    Is it the correct approach?

    #1456374
    Elvin
    Staff
    Customer Support

    Oh now that makes sense. The font you’re adding didn’t ask for the variants.

    I’d change that to this.

    add_filter( 'generate_typography_google_fonts','generate_add_more_fonts' );
    function generate_add_more_fonts( $google_fonts )
    {
    	return $google_fonts . '|Nunito:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700|Lato';
    }

    You can even extend Lato if you need its variant font weights too by adding |Lato:ital,wght@0,400;0,700;1,400;1,700 instead of just plain |Lato.

    If you’re curious, I took the format from google embed codes generated here. https://fonts.google.com/specimen/Nunito?sidebar.open=true&selection.family=Nunito:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700

    and here – https://fonts.google.com/specimen/Lato?query=Lato&sidebar.open=true&selection.family=Lato:ital,wght@0,400;0,700;1,400;1,700

    #1456381
    Chaitanya

    Thanks Elvin. It’s working now.

    Still have a question, For lato it’s working fine without adding any font variants there.

    In Appearance > Customize > Typography > Body,

    I have selected all the font variants there. Is it enough or do I really need to add the wanted font-weights in functions.php ?

    #1456397
    Elvin
    Staff
    Customer Support

    Nice one.

    Still have a question, For lato it’s working fine without adding any font variants there.

    If you look closely, Lato has the same issue.

    It also only loads normal/regular(400) and 600. If you try to set its font-weight to less than 400 or more than 600, it won’t change.

    I have selected all the font variants there. Is it enough or do I really need to add the wanted font-weights in functions.php ?

    You don’t have to add it into the code if it’s already set on the Customizer settings. Else, you’ll have to add it in.

    #1456398
    Chaitanya

    Thank you so much Elvin.

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