4 ms·

I have a problem with Google web fonts. Sometimes connectivity to Google is problematic. For example in China after searching the wrong keyword all connections

I have a problem with Google web fonts. Sometimes connectivity to Google is problematic. For example in China after searching the wrong keyword all connections to Google are blocked for 1.5 minutes. This leads to sites with Google web fonts not hosted locally to hang in loading as it waits for a response from Google. This has led me to hosting web fonts locally. Was wondering if anyone has a better solution. Or if anyone from Google is reading this, could they place web fonts on a different domain/IP and pray that global censors don't list it? Kinda nice to be able use cached versions of the fonts. I only use China as an example. I have had problems with Google web fonts in other country and on bad connections. edit: watching the video it sounds like by hosting locally I am not taking advantage of the different versions served to different operating systems.

moonboots 14y ago
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 https://github.com/typekit/webfontloader [2] http://code.google.com/p/googlefontdirectory/ http://code.google.com/p/googlefontdirectory/ [3] http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator
- shimon_e 14y ago
  Wow thanks! I'd recommend this as default practice.
- alexchamberlain 14y ago
  Could you not mirror the fonts from Google?
  - shimon_e 14y ago
    No as they need 30+ variants of the fonts to support everything right now and Google customizes them on the basis of user agent. Hopefully in the future it will be a lot more simpler.
igrigorik 14y ago
Thanks for pointing this out, will definitely look into it. One tip is, and it sounds like you're already using it, is to download the webfonts to your local machine, which would avoid any future downloads. (Except, that still wouldn't resolve the blocking of the dynamic CSS).
- shimon_e 14y ago
  Thanks. Glad that Google developers talk their time to read comments here. :D I'm reading your blog and wow it is very useful. Guess you are the guy to look into such issue.
- shimon_e 14y ago
  BTW, the hang seems to be caused by the block of the dynamic css.
- shimon_e 14y ago
  After reading your post http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/ http://www.igvita.com/2012/06/14/debunking-responsive-css-pe... It seems merely adding a media tag to the link tag would prevent webkit browsers from hanging.
johnx123-up 14y ago
The article seems to suggest that with fonts.googleapis.com, the font is served from common domain and cached for 1-year (by default). So, all sites using the same font inclusion logic may have to load from cache quickly. Am I missing anything here?
- shimon_e 14y ago
  The fonts themselves are cached. The CSS is cached for 24 hours to allow them to point to a new versions of the font. This css file stops the parser till it is loaded and when connectivity to Google is an issue it hangs the loading of sites. See http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/ http://www.igvita.com/2012/06/14/debunking-responsive-css-pe...

moonboots 14y ago

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 https://github.com/typekit/webfontloader [2] http://code.google.com/p/googlefontdirectory/ http://code.google.com/p/googlefontdirectory/ [3] http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator

shimon_e 14y ago
Wow thanks! I'd recommend this as default practice.
alexchamberlain 14y ago
Could you not mirror the fonts from Google?
- shimon_e 14y ago
  No as they need 30+ variants of the fonts to support everything right now and Google customizes them on the basis of user agent. Hopefully in the future it will be a lot more simpler.

igrigorik 14y ago

Thanks for pointing this out, will definitely look into it. One tip is, and it sounds like you're already using it, is to download the webfonts to your local machine, which would avoid any future downloads. (Except, that still wouldn't resolve the blocking of the dynamic CSS).

shimon_e 14y ago
Thanks. Glad that Google developers talk their time to read comments here. :D I'm reading your blog and wow it is very useful. Guess you are the guy to look into such issue.
shimon_e 14y ago
BTW, the hang seems to be caused by the block of the dynamic css.
shimon_e 14y ago
After reading your post http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/ http://www.igvita.com/2012/06/14/debunking-responsive-css-pe... It seems merely adding a media tag to the link tag would prevent webkit browsers from hanging.

johnx123-up 14y ago

The article seems to suggest that with fonts.googleapis.com, the font is served from common domain and cached for 1-year (by default). So, all sites using the same font inclusion logic may have to load from cache quickly. Am I missing anything here?

shimon_e 14y ago
The fonts themselves are cached. The CSS is cached for 24 hours to allow them to point to a new versions of the font. This css file stops the parser till it is loaded and when connectivity to Google is an issue it hangs the loading of sites. See http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/ http://www.igvita.com/2012/06/14/debunking-responsive-css-pe...