CODEWITHSUNDEEP
htmlcsswebfontsgoogle-font-api
Adrian Mayr
Adrian Mayr

Reputation: 21

CSS - Implement different fonts of a font-family

I have the font-family Roboto with two different font-types (400 and 500i)

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500i" rel="stylesheet">

I would like to implement 500i, but this:

p {
font-family: 'Roboto', sans-serif;
}

just allows me to use the 400 font.

How can I implement the 500i without removing the 400?

Upvotes: 1

Views: 1195

Answers (1)

id.ot
id.ot

Reputation: 3151

Define both bold and italic on the element:

    p {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-style: italic;
    }

NOTE If you have the Roboto font installed locally you'll need to add script=all rev=2 in the following manner:

p {
    font-family: 'Roboto script=all rev=2', sans-serif;
    font-weight: 500;
    font-style: italic;
}

If the font is installed locally the browser is going to rely on that font and ignore the web-font. This SO Post covers this. I can't say with any certainty but it seems likely that adding script=all rev=2 by default is the way to go due to the fact we don't know if our sites visitors have a particular font installed. If you navigate to the Roboto font offering and inspect (using a browsers dev-tools) the 'Medium Italic' example we see the font-family property is using script=all rev=2 by default.

Upvotes: 1

Related Questions