Chrome sometimes doesn't render Google font until redraw
<p>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.</p>

<p>Here's a screenshot of the issue </p>

<p><a href="https://i.stack.imgur.com/29JM9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/29JM9.png" alt="broken fonts"></a></p>

<p>And this is what it's suppose to look like.</p>

<p><a href="https://i.stack.imgur.com/6sPnt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6sPnt.png" alt="correct rendering"></a></p>

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

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

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

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

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

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

<p>I've found a bug report for what looks like my issue <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=336476" rel="nofollow noreferrer">here</a> but it's been marked as fixed in Chrome 34+ and I'm running 49.</p>

<p>I cannot replicate this in any other browsers.</p>

<p>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!</p>