How do I use 2 different fonts on HTML-CSS with google font apis?-CodePudding

So I imported 2 fonts (Roboto and Shrikhand) on my CSS file using @import I want the text in my page (the paragraphs <p>) to be in Roboto and my titles (the headings <h1>, <h2>...<h6>) to be in Shrikhand

Here's my CSS code

/*Roboto font importation for text*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,600;1,700");

/*Shrikhand font importation for titles*/
@import url("https://fonts.googleapis.com/css2?family=Shrikhand:ital,wght@0,600;1,700");

body{
    box-sizing: border-box;
    margin: 0;
    font-family: 'Roboto', 'Shrikhand';
}

.main__heading{
 font-family: 'Shrikhand';
}

.main__text{
 font-family: 'Roboto';
}

But only the text is in Roboto, the titles are in a default font (Times new roman). And I'm clueless as to what to do to change their font.

Some help would be much appreciated.

CodePudding user response：

You Shrikhand @import URL is broken. It appears you simply changed the family name and expected it to work. However, that expectation would only be met for fonts having exactly the same font weights and font faces, which is not true for Roboto and Shrikhand.

This will work:

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');

Additionally, upon checking, your Roboto link is also broken. It does not contain a font face with regular typeface and weight of 600. This makes the entire Roboto link invalid which also prevents the second font-family to load.

Simply put: the query details after the font link are quite important. When you play around with them you have to make sure they point to existing features/resources. That's why Google provides you the exact link. You're supposed to copy/paste that link.

Here's the correct import for Roboto 700, italic regular:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,700&display=swap');

if you want 600 regular: tough luck, it doesn't exist. You might want to try 500 regular.

You can also merge your font imports into only one:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,700&family=Shrikhand&display=swap');

See it working here.