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

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

[Leo]

Hi there,

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

You can use the private information field.

Let me know 🙂

[Chaitanya]

Hi Leo,

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

[Leo]

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

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

[Leo]

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?

[Chaitanya]

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

[Leo]

Would this work?

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

[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

[Elvin]

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.

[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?

[Elvin]

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

[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 ?

[Elvin]

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.

[Chaitanya]

Thank you so much Elvin.

[Author]

Posts