I have my blog hosted on Blogger. Previously I had set the font to Arial. Recently I set to a better looking webfont Arimo. After changing the font I have observed that whenever my blog loads up It first displays the text in Arial (I presume) and then in Arimo.

This action after the page is completely loaded and very quickly, kind of in the blink of an eye. After rendering the text displays completely fine. But Arial-to-Arimo transition does not look good.

Why does this happen? Is there a solution for it? Is this because of webfont?


Yes, it's due to webfonts. And it's caused by something called "lazy loading" (the browser needs to build a render tree before loading fonts / rendering text).

Google Developers offers two potential solutions:

  1. Font Loading API
  2. Inlining fonts into a CSS stylesheet

Ability and performance will vary by browser, so neither of these two are universal solutions - but it may be worth exploring them as options.

Lots more info about this can be found on this Google Developer page: "Webfonts: Optimizing and Rendering"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.