Who doesn’t love beautiful, and appropriate, fonts. One of the most important design elements of any website is its chosen typography. Fonts determine not only the “vibe” of your website, but also how readers engage with your content.
However, much like any other on-page design element, typography plays a direct role in overall website speed and performance. While its impact on speed isn’t as weighty as images or other forms of media, in the quest to achieve optimum performance metrics, every letter counts (literally).
It should come as no surprise that almost 70 percent of all websites use some form of custom typography. In the quest for brand individuality, many websites achieve their aesthetic desire at the cost of performance and user issues. So, what can you do to ensure that your brand retains its originality without sacrificing performance and functionality?
While there are several ways to tackle this widespread issue, let’s spend a few minutes reviewing the most effective ways you can optimize custom fonts.
Tip #1 – Don’t Go Overboard With Font Styles
The biggest mistake many web designers make is overloading their website with a myriad of custom font files. Did you know each custom font requires a web browser to download the file? While this isn’t a huge deal if you only have a small number of differing fonts, when you start to approach double-digit font files, your website speed is going to suffer.
In most situations, you only need three different font files. If you can work with fewer, that’s even better. But, as a general rule of thumb, try to streamline font styles to three or less.
Tip #2 – Use Browser Supported Web Fonts
There are four primary web fonts supported by almost every browser. This means, the files are automatically understood by the browser, which doesn’t require additional downloads. These font formats include:
- TTF – True Type Font
- WOFF – Web Open Font Format
- WOFF2 – Web Open Font Format v2
- EOT – Embedded Open Type
Choosing fonts from these four libraries will streamline on-page rendering, which will have a substantial positive influence on content-heavy websites.
Tip #3 – Only Load What You Need
Rather than loading all font files on every page, only instruct browsers to download and render font files used on that specific page. Avoid using the @font-family code on a page where that specific font isn’t used.
Also realize that if you use the <i> code, most browsers will automatically download the italic font version, which means you don’t need to specific this font in the on-page style section.
Tip #4 – Use Web Font Loader