• en
  • de

Optimizing Typekit font loading

5. May 2015

When loading web-fonts, we often see a brief un-styled moment before the browser applies the actual font. Gladly Typekit and also Google Web Fonts provide an option around that.

Both are using WebFont Loaders to help handle those brief moments.

TypeKit Webfont Loader Example

This adds a class name to the <html> element during loading

This is removed when loading is done. This allows us to hide content until all fonts are loaded.

Webfonts Loading

This also adds classes once the webfonts have been loaded, which allows us to add some transitions to reveal the content again.

Webfonts Loaded

One last thing. You should add the webfont loader early in your content, so that it can do its magic before anything else is being loaded.

Leave a Reply

Notify of


I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Previous Next