8

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?

Community
  • 1
  • 1
Goose
  • 4,764
  • 5
  • 45
  • 84
  • Did you tried `` ? So you can load the `font-weight: 700;` too? – Emre Bolat Jul 27 '16 at 14:04
  • @EmreBolat is right. Also, try this font-family: 'Roboto', sans-serif; – Vcasso Jul 27 '16 at 14:06
  • @EmreBolat I have tried that, hard refreshed, but the problem is still there. I will update my question to reflect this. – Goose Jul 27 '16 at 14:14
  • @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 Jul 27 '16 at 14:19

1 Answers1

9

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.

Emre Bolat
  • 4,316
  • 5
  • 29
  • 32
  • 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? – Goose Jul 27 '16 at 14:30
  • Exactly. Roboto is very popular and there is a good chance that your browser is already cached it from somewhere. – Emre Bolat Jul 27 '16 at 14:32