webfontloader

FWIW, Typekit has an async loader script that doesn't block the rendering. Same is the case with Google web fonts. Both services use the open source WebFontLoader[1] library behind the scenes (which is mentioned in the article). Typekit has a feature they call language subsetting which reduces the file size of a particular typeface family by removing language support based on user selection. This can reduce font sizes quite a bit. >Google Fonts doesn't use any JavaScript (by default, anyway), which makes it faster than almost any JavaScript-enabled approach This involves a stylesheet which means the rendering is blocked until it is downloaded and processed and the users will see a page with blank text until that happens. Sometimes it is better to show the content (even in a fallback font) instead of a blank page. 1: https://github.com/typ

Nothing is broken, it's just a design decision: do you show unstyled content or wait until you have everything. See http://paulirish.com/2009/fighting-the-font-face-fout/#updat... for details but the gist is that browsers used to differ (Firefox chose the approach you prefer) but have converged on blocking until the fonts have downloaded. Currently the only way to get the behaviour you want would be using something like https://github.com/typekit/webfontloader and using CSS to specify a default to be used until the font has transfered: body { font-family: sans-serif; } .webfonts-loaded body {font-family: "Open Sans"; }

In chrome, I'm not seeing the flash warning message. I'm only seeing an endless "Loading your fonts..." I have click-to-play flash enabled. Webfontloader[1] uses javascript to detect whether a specific font is available. They use a hack where they change the font of a piece of text and calculate whether the width has changed, indicating the system is using specified font instead of the default serif or san serif. If you had a large list of fonts, you could filter out the ones the user has. [1] https://github.com/typekit/webfontloader.git

Google and Typekit released a javascript project called web font loader[1] that allows custom fallback logic. You can add custom code that loads self-hosted fonts if Google is timing out. To generate the fonts on your server, you can download the original fonts[2] and run them through FontSquirrel's Font-Face Generator[3]. This provides some of the optimization benefits that Ilya mentions in his blog post. [1] https://github.com/typekit/webfontloader [2] http://code.google.com/p/googlefontdirectory/ [3] http://www.fontsquirrel.com/fontface/generator