Here&#x27;s the browser view of this brief interaction: <a href="http:&#x2F;&#x2F;i.imgur.com&#x2F;IWFEKGt.png" rel="nofollow">http:&#x2F;&#x2F;i.imgur.com&#x2F;IWFEKGt.png</a> [0]<p>Basically, the stylesheet finished transferring and the browser followed up with laying out the page. Some data:uri requests were in flight and when they finished (200ms later) the page was laid out again and now applied the fonts. 
Typekit has historically detect in JavaScript when a font loads because they like to ensure the text stays invisible (across browsers) while the page hasn&#x27;t finished loading the fonts. But in this case, it looks like there&#x27;s a problem with either Typekit not finding the load &quot;events&quot;[1] of these fonts, or Chrome mishandling data uri fonts in some way. We&#x27;ve filed <a href="https:&#x2F;&#x2F;crbug.com&#x2F;607788" rel="nofollow">https:&#x2F;&#x2F;crbug.com&#x2F;607788</a> to investigate further.<p>Loading fonts well is hard. Here&#x27;s some advice on doing it well: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;paulirish&#x2F;d511793a1c3b74b31460" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;paulirish&#x2F;d511793a1c3b74b31460</a><p>[0] You can explore the same recording here: <a href="https:&#x2F;&#x2F;frontend.chrome-dev.tools&#x2F;serve_rev&#x2F;@db7757b63f29696b9b465949f9704a0d9d149f2b&#x2F;inspector.html?loadTimelineFromURL=https:&#x2F;&#x2F;dl.dropboxusercontent.com&#x2F;u&#x2F;39519&#x2F;fout-trace.json&amp;experiments=true" rel="nofollow">https:&#x2F;&#x2F;frontend.chrome-dev.tools&#x2F;serve_rev&#x2F;@db7757b63f29696...</a> (Chrome only. Check the screenshots checkbox)<p>[1] <a href="https:&#x2F;&#x2F;drafts.csswg.org&#x2F;css-font-loading&#x2F;" rel="nofollow">https:&#x2F;&#x2F;drafts.csswg.org&#x2F;css-font-loading&#x2F;</a> was standardized for these purposes. It&#x27;s available in  Chrome, Opera and Firefox to reliably detect when a font has finished loading.<p>[‽] As mentioned later by hatsix, the font-display spec introduces a CSS property to provide control over FOUT&#x2F;FOIT to the site: <a href="https:&#x2F;&#x2F;tabatkins.github.io&#x2F;specs&#x2F;css-font-display&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tabatkins.github.io&#x2F;specs&#x2F;css-font-display&#x2F;</a> It will definitely bring a lot of sanity to a something that&#x27;s been a problem since at least 2009 :) <a href="http:&#x2F;&#x2F;www.paulirish.com&#x2F;2009&#x2F;fighting-the-font-face-fout&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.paulirish.com&#x2F;2009&#x2F;fighting-the-font-face-fout&#x2F;</a>