Chrome sometimes doesn't render Google font until redraw

Question

I'm experiencing a weird text rendering issue on Chrome, where sometimes the text will not render at all until something triggers the browser to redraw.

Here's a screenshot of the issue

And this is what it's suppose to look like.

When it does fail, as soon as I open the dev tools, the font will render in correctly.

When the issue occurs with dev tools already open, changing the font-size will make the text appear.

Interestingly enough, when I set the font-size back, the text disappears again. EG:

$('p').css('font-size', 12); // Text appears
$('p').css('font-size', 13); // And its gone again.

When I remove Google fonts, the problem completely goes away. This is my font reference, I don't think there's anything wrong here?

<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>

I've found a bug report for what looks like my issue here but it's been marked as fixed in Chrome 34+ and I'm running 49.

I cannot replicate this in any other browsers.

Would love to hear for anyone who might be able to point me in the right direction. If you need any more info let me know!

Answer 1

After a few hours of headache, I think I've found my problem.

Just under the screenshots I posted, there's an embedded Youtube video. Turns out, youtube use the same font we do (Roboto). When I removed the Youtube iframe or changed our app font to another Google font the problem went away. Which leads me to think there's some sort of conflict when downloading the fonts..? I'm really not sure.

I did end up getting Roboto working by including it via Javascript at the bottom of the page (instead of the link tag). Which kept the design guys happy :)