1

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?

Adrian Mayr
  • 21
  • 2
  • 2
    Possible duplicate of [Specifying Style and Weight for Google Fonts](https://stackoverflow.com/questions/7256065/specifying-style-and-weight-for-google-fonts) – hungerstar Jan 04 '18 at 18:11
  • @Adrian Mayr - Just an FYI there is a helpful [StackOverflow Tour](https://stackoverflow.com/tour) you can review to increase timely responses from the community. One major help to expediting a search on SO is to always select an answer to questions posed in your original post. If an answer is provided (below) you'll benefit by adding a comment to the answer explaining why that answer is failing, then the community is prompted to look deeper. Welcome to StackOverflow. – id.ot Jan 18 '18 at 00:31

1 Answers1

1

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.

id.ot
  • 3,071
  • 1
  • 32
  • 47