How to use two different fonts in two different pages?

Hi there,

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

You can use the private information field.

Let me know :)

Hi Leo,

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

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

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

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?

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

Would this work?

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

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

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.

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?

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

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 ?

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.

Thank you so much Elvin.