Roboto font in bold weight is invisible

Question

I have a website for internal use that uses the Roboto google font. Here is the code that includes it.

<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">.

&

body {
    font-family: "Roboto";
}
b, strong {
    font-weight: 700;
}

I've found someone at my company who's Chrome can't render this font when it is bold. I could replicate it by going to Youtube and making Roboto text bold with the inspect element. This problem does not occur on any other computers. The Chrome is up to date and has no extensions installed. I've tried closing and reopening Chrome as well as several hard refreshes. Forcing the browser to repaint with resize, CSS, or JS does not fix the issue either.

This does not dupe question Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not. The problem occurs on both http and https versions of the site, the font is loaded with //, and I get no insecure content warnings from Chrome.

What is causing this, and is there anything I can do on the website or on the persons computer to further troubleshoot or fix this?

Did you tried <link href="//fonts.googleapis.com/css?family=Roboto:500|700" rel="stylesheet" type="text/css"> ? So you can load the font-weight: 700; too? — Emre Bolat
@EmreBolat is right. Also, try this font-family: 'Roboto', sans-serif; — Vcasso
@EmreBolat I have tried that, hard refreshed, but the problem is still there. I will update my question to reflect this. — Goose
@EmreBolat ah, it's 500,700, not 500|700, but that fixed it. Still would like to know why this is only an issue on this computer. Either way, if you post this as an answer, I will accept. — Goose

Emre Bolat Emre Bolat · Accepted Answer · 2016-07-27T14:29:01

If you use Google Fonts

<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">

without a fallback font like;

body {
    font-family: "Roboto";
}

b, strong {
    font-weight: 700;
}

You should provide that font-weight in your Google Fonts link like;

<link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css">

Or, you should provide a fallback font;

body {
    font-family: "Roboto", sans-serif;
}

By doing so, if your browser can't find the font-weight: 700; Roboto font, it can use a suitable sans-serif font from your system.

In ideal situations, using a font-family to support all possible computer systems like;

body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

will solve all of these problems.

Roboto font in bold weight is invisible

1 Answers