Embedded Fonts Render Then Disappear

Question

I have a site that is loading in some typekit fonts and an embedded icon font.

They all seem to load in well in all browsers. However if the browser window is left inactive for a period of time they disappear and the system fonts are rendered in their place. Re-sizing the browser seems to then fix the issue and the embedded fonts reappear.

The issue is very difficult to recreate as it doesn't seem to happen all the time, but it does happen a lot of the time. So far I have only seen it happen in Chrome.

Other details: The site is hosted on Heroku, Rails 4, Turbolinks off.

Font-face embed for icon font:

@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}

Typekit header

<script type="text/javascript" src="//use.typekit.net/ssu8vyw.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Any ideas?

Answer 1

This is Ben from Typekit. I believe this is being caused by a bug in Chrome.

Here is the issue report, if you would like to subscribe to updates or leave a comment: https://code.google.com/p/chromium/issues/detail?id=236298

Because this is an issue with Chrome, there doesn't appear to be anything we can do on our side. The good news is it's been fixed. The not so good news is that the next stable release will be out in February. We're keeping an eye on this and will make sure it's resolved when Chrome is updated.

Feel free to drop us a line at: [e-mail] with any specific questions.

Cheers, Ben