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
This ingenious tool is a Javascript library developed by Adobe Typekit and Google Fonts to aggregate and streamline font files derived from multiple sources. Essentially, this feature loads custom web fonts in the background, which means it doesn’t influence initial page loading times. Should a font file exceed a download duration (set by you), a designated fallback font is used. However, if the custom font file downloads within the allotted timeframe, then the fallback font is switched out for the custom font.
