Ever stumbled upon an article on social media that catches your interest? You click it. You are curious and anxious to read it. You are in the website – it loads, but at first, it seems empty. The site is there, but there is no text in it. You are probably annoyed. You are probably losing interest in the page fast and you’re ready to back out. A few split seconds later, the text finally appears.
This has become a problem in the past few years since fonts used by web pages can now be loaded from the web instead of just the default fonts of the user’s machine. This problem is more common in smaller machines such as smartphones and tablets. While we can now have fonts display exactly as we intend it to on all machines and browsers, consequently, it is now a factor in the loading of the web page. It is now part of our thinking when it comes to designing and developing for performance and the user experience.
So how do we deal with fonts with performance and user experience in mind?
The decision to use a web font at all.
Does certain text really need to use a web font? The reason to use web fonts is because we want certain text to look the same and fit the same across all systems and browsers. So why wouldn’t you want to use a web font? It comes down to performance. Web fonts have to be loaded from the server to the user like any other request on the web. This may make sense for titles, logos, hero text, and headings. For paragraphs, blogs, articles, important information, text that can be flexible with look and space, and just any text the user wants to see right away regardless what font it is, it may be simpler in these cases to just use the default serif/sans-serif fonts in the user’s machine.
Implementing the best web font
When deciding to use web fonts, it’s best to use the web font format supported across all popular modern browsers and devices. Right now, WOFF (Web Open Font Format) is supported by all the latest browsers on all devices. WOFF2 is a newer version that is only supported on Firefox and Chrome. This one has even better compression, loads faster, and is much lighter.
It is important to know that while we want our text to look good and pleasant to read, just like any other aspect of the web site’s user experience, performance must always come to mind.
Here are some useful resources if you would like to learn more about the best practices when it comes to implementing fonts and ways to deal with web fonts:
