Re: Optimizing the Critical Rendering Path - http://www.sitepoint.com/optimiz...
Oct 17, 2014
from
"Key thing to remember with webfonts is they block rendering in Safari, Chrome, Opera and Firefox - the last three wait 3 seconds before timing out and falling back to a default font, Safari waits longer.
But…
The browser doesn't know which fonts it needs until the render tree is being built i.e. until the CSS styles are matched against the DOM, and only then does it request them - it's one of the reasons fonts can be such a painful user experience on slow networks.
We then get into the tradeoff of base64 encoding fonts which of course results in larger CSS, so longer download and later construction of the render tree, which is why people go down the route of storing them in localStorage.
Ilya Grigorik put together a great idea for controlling font-blocking behaviour in more detail - https://github.com/igrigorik/c..."
- Andy Davies