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?

Propagation

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? – Cissiee

@EmreBolat is right. Also, try this font-family: 'Roboto', sans-serif; – Veolaver

@EmreBolat I have tried that, hard refreshed, but the problem is still there. I will update my question to reflect this. – Propagation

@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. – Propagation

Answer 1

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.

Cissiee

Is it possible that it is only a problem now because my computer already has Roboto 700 from visiting other websites that have it, so it's cached? – Propagation

Exactly. Roboto is very popular and there is a good chance that your browser is already cached it from somewhere. – Cissiee

Answer 2

The official documentation provides this embed code :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

With this code we can use to Roboto font with bold weight.

find more info here : https://fonts.google.com/selection?query=roboto

Pindaric