{"id":16918,"date":"2018-12-05T10:56:29","date_gmt":"2018-12-05T16:56:29","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/blog\/?p=16918"},"modified":"2021-11-17T01:14:44","modified_gmt":"2021-11-17T07:14:44","slug":"typography-of-speed-fonts-help-hurt-website-speed","status":"publish","type":"post","link":"https:\/\/www.dotcom-tools.com\/web-performance\/typography-of-speed-fonts-help-hurt-website-speed\/","title":{"rendered":"The Typography of Speed – How Fonts Help or Hurt Website Speed"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]\"TypographyWho doesn\u2019t love beautiful, and appropriate, fonts. One of the most important design elements<\/a> of any website is its chosen typography. Fonts determine not only the \u201cvibe\u201d of your website, but also how readers engage with your content.<\/p>\n

However, much like any other on-page design element, typography plays a direct role<\/a> in overall website speed and performance. While its impact on speed isn\u2019t as weighty as images<\/a> or other forms of media<\/a>, in the quest to achieve optimum performance metrics, every letter counts (literally).<\/p>\n

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?<\/p>\n

While there are several ways to tackle this widespread issue, let\u2019s spend a few minutes reviewing the most effective ways you can optimize custom fonts.<\/p>\n

Tip #1 – Don\u2019t Go Overboard With Font Styles<\/h2>\n

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\u2019t 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.<\/p>\n

In most situations, you only need three different font files. If you can work with fewer, that\u2019s even better. But, as a general rule of thumb, try to streamline font styles to three or less.<\/p>\n

Tip #2 – Use Browser Supported Web Fonts<\/h2>\n

There are four primary web fonts supported by almost every browser. This means, the files are automatically understood by the browser, which doesn\u2019t require additional downloads. These font formats include:<\/p>\n