Do you remember when most website fonts looked pretty much the same? During the infancy of the internet, we essentially had a handful of fonts to choose from. However, as advancements in web technology grew, so did the font offerings. My how times have changed.
Thanks to the advent of Google Fonts and Adobe Typekit, there are literally thousands of customized fonts at your disposal. While this is an excellent opportunity for website designers to showcase their skills, it’s an unfortunately common hurdle many webmasters must overcome when dealing with an underperforming website.
While you may think the culprit of your sluggish website may be due to some large issue, such as dozens of redirects or a low-quality web host, what if the root cause of your slow website was something smaller? As countless websites are figuring out, reaching the pinnacle of website performance may be thwarted by fancy lettering sprinkled throughout their pages.
Why Fonts Diminish Website Speed? A Brief Explanation
In order to understand how fonts slow your website, it’s important to learn how typography interacts with end-user browsers. Generally, custom website fonts aren’t automatically installed on your end-user’s browser. This means, in order for the font to display, their browser must download the font file.
While this may not be detrimental if you only have two or three custom website fonts, the issue becomes problematic when you begin using more than three custom fonts. Although the size of a web font file isn’t substantial, when combined with the rest of the website files, even the smallest additional can translate into noticeable performance delays. This is especially true when your end-user has a slow internet connection, or is using a mobile device with less-than-reliable network connectivity.
So, what does this mean for websites who wish to use unique fonts, but also desire the fastest website possible? Unfortunately, this may translate into having to use a select list of readily-available (i.e., non-custom) website fonts.
Universal Browser-Supported Website Fonts
While you may not be able to call upon the fancy new font you found in your Adobe Typekit, this doesn’t mean you’re limited to only one or two options. It does mean, however, the library of fonts to choose from is smaller.
In the quest for top search engine rankings, and the ultimate end-user experience, you may want to consider going with a universal web font library supported by all browsers. While there are a total of four web font libraries, only two of these libraries are supported by the five main web browsers, which include: Internet Explorer, Google Chrome, Mozilla Firefox, Safari and Opera.
The two web font libraries are:
- TrueType Font (TTF) – This is the long-standing standard for website fonts, which was first developed in the 1980s by Microsoft and Apple. If you wish to sustain a fast website, and don’t mind standard typography, then this is your ideal option.
- Web Open Font Format (WOFF) – Unlike the aforementioned, WOFF wasn’t developed until 2009 as a new source for web typography. Essentially, this font family is TTF, but with enhanced compression. For those looking to cultivate the fastest website possible, WOFF fonts are like the best option for you.
