Blogger changes font on the blog after rendering text in Arial

bloggerfont

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?

Best Answer

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"