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
- Never to load more than 2 fonts
- Keep your font file sizes down
- Hosting your own fonts. Don’t do it!
- 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.