title: Embedded Fonts Render Then Disappear
body: <p>I have a site that is loading in some typekit fonts and an embedded icon font.</p>
  
  <p>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.</p>
  
  <p>The issue is very difficult to recreate as it doesn't seem to happen all the time, but it does happen <strong>a lot</strong> of the time. So far I have only seen it happen in Chrome.</p>
  
  <p>Other details: The site is hosted on Heroku, Rails 4, Turbolinks off. </p>
  
  <p>Font-face embed for icon font:</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>Typekit header </p>
  
  <pre><code>&lt;script type="text/javascript" src="//use.typekit.net/ssu8vyw.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;
  </code></pre>
  
  <p>Any ideas?</p>