Font Loading & Rendering

Awesome design, coded really well, but it loads like crap. Sure, everything looks great after it loaded but during the loading process, stuff is out of wack or just looks janky. This article is going to go into a little detail about what is going on with the loading in your browser and options on what you could do to make it better.

I have always gotten my design and loaded the font that was decided on in it. Nothing is wrong with that, that is, unless you are a UXer. Having a lot of cool fonts can be great for aesthetics but when it effects the user experience, you have an issue. I like to use Craigslist as my prime example of the importance of speed vs looks. People love Craigslist because they are there for the content and they want and get it fast! Bill Gates put it best:

“Content is King” -Bill Gates

Lets take a dive into What is going on when a browser loads that font and what the user sees. Then you can see some things that you should and should not do.

What happens when you load font?

  • Browser reads HTML
  • Browser analyzes font
  • Browser hides the fonts visibility for usually up to 3 seconds or until the font is loaded
  • Browser loads font
  • Browser shows font

Should Not’s

  • Never to load more than 2 fonts
  • Keep your font file sizes down
  • Hosting your own fonts. Don’t do it!

Should’s

  • Always have a fallback font.
    • Sometimes the fonts will not load due to many reasons. Always have a backup plan.
  • Only render the font weights and styles that you need.
  • Keep it in your head. Always load that font right away by placing your call in the head of your page.
  • Style with your fallback font too.
Prevent Bad User ExperienceIn the end, you are a filter in the process of Conception to Final Product. So use your knowledge to filter the things out that a novice web designer might not understand yet, like having 6 different fonts on the homepage. Only you can prevent a bad User Experience for the web.

*Note: Most modern browsers hide font until the font is loaded, there are ways around this that allow you to show text right away and then change it after your font has loaded, that information is better for another post. You might already notice some sites that do this technique. It loads text for you, then when the font is finished loading, it refreshes it to show the new text in the font that they had to load. This gives an ugly flash but the content is loaded right away which is beneficial for users in the the perceived load time.

For more information, check out the links below

https://css-tricks.com/fout-foit-foft/

http://help.typekit.com/customer/portal/articles/6852-Controlling-the-Flash-of-Unstyled-Text-or-FOUT-using-Font-Events