What Are Web Fonts?<\/h2>
There are two basic types of fonts used on the web:<\/p>
- Web-safe fonts<\/strong>: These are standard fonts that come pre-installed on devices, including as Times New Roman, Arial, and Courier.<\/li>\n\n
- Webfonts<\/strong>: These are fonts that are not pre-installed and must be downloaded by the browser before they are displayed.<\/li><\/ul>
To the casual eye, webfonts are a collection of letters of the alphabet, at least to us English speakers. But delve deeper and they are actually a collection of glyphs, and each glyph is a vector shape that describes a letter or symbol in many languages, not just English.<\/p>
Two variables determine the size of a particular font file: the complexity of the vector paths of each glyph and the number of glyphs in a particular font. For example, Open Sans, a popular webfont, contains 897 glyphs, including Latin, Greek and Cyrillic characters.<\/p>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/open-sans.jpg\")
<\/figure><\/div>Open Sans contains hundreds of glyphs.<\/em><\/p>
Hosting and Delivering Web Fonts<\/h2>
When you choose to use a web font, it has to be stored somewhere. There are two options for hosting web fonts:<\/p>
- Self-hosting<\/strong>: Hosting font resources on your web server together with the rest of your website files.<\/li>\n\n
- Third-party hosting<\/strong>: Using a font service like Adobe Typekit, Fonts.com or Google Fonts.<\/li><\/ul>
There are advantages and disadvantages that come with each of these options. While using a third-party solution might be simpler to set up, it means you have no control over performance and security, or even if the service goes down. In 2015 when Typekit\u2019s servers crashed<\/a>, sites the world over were forced to make do with Arial and Georgia.<\/p>
But if you\u2019re not concerned about outages \u2013 Typekit was only down for four hours \u2013 speed or delivery, third-party hosting might be your preferred option if you don\u2019t want to deal with self-hosting font resources.<\/p>
Tips for Optimizing Fonts<\/h2>
Web font optimization is a complex topic and there are many different ways to optimize the delivery of fonts. Exactly how you optimize your fonts will depend on your hosting preferences, your site\u2019s design and server, your technical abilities, and how far you are willing to go to improve the performance of your fonts.<\/p>
Before getting started optimizing your fonts, it\u2019s a good idea to know exactly how many you\u2019re using. An easy way to do this is to run your website through speed testing tools, like GTmetrix<\/a> or Pingdom<\/a>, so you can analyze the resulting waterfall chart and view your HTTP requests. Sometimes, plugins and themes might be using fonts that you\u2019re not aware of.<\/p>
Here are some steps you can take to optimize the delivery of your fonts.<\/p>
1. Audit and Monitor Font Use<\/h3>
With browser support for the CSS @font-face rule now widespread, the use of custom webfonts has exploded. According to the HTTP Archive, 67% of web pages now use custom fonts<\/a>, with websites averaging a median of four font HTTP requests.<\/p>
The jury\u2019s out on exactly how many fonts is too many, though the general rule of thumb is that three\u2019s a crowd and it\u2019s best to stick with two<\/a> \u2013 one for your headings and one for body copy.<\/p>
Not only does minimizing the number of webfonts you use help reduce the overall number of HTTP requests, it also ensures a more streamlined and consistent site design. Take LINGsCARS<\/a>, for instance. It has so many fonts and other ridiculous elements it makes me want to scratch my eyes out. Fortunately, it uses only web safe fonts to make it load faster.<\/p>
It\u2019s also important to take into account variations, such as italics, bold and other weights. Each font variations add weight to the file size, so try to avoid adding those you\u2019re not planning to use.<\/p>
2. Subset Font Resources<\/h3>
Unless you provide translations across your site, it\u2019s best to keep character sets to a minimum. This means only delivering characters for the languages you need.<\/p>
As Google Web Perf Guru Ilya Grigorik explains, many fonts can be subset or even split into multiple Unicode ranges to deliver only the characters needed for a particular page. Using @font-face, you can use the Unicode-range descriptor<\/a> to specify a list of range values, which can be set out in three different forms:<\/p>
- Single codepoint (for example, U+416)<\/strong>: indicates a single character.<\/li>\n\n
- Interval range (for example, U+400-4ff)<\/strong>: indicates the start and end codepoints of a range of characters.<\/li>\n\n
- Wildcard range (for example, U+4??)<\/strong>: ? characters indicate any hexadecimal digit.<\/li><\/ul>
For example, here\u2019s how you would split the Awesome Font family into Latin and Japanese subsets, each of which the browser would download as-needed by the user:<\/p>
\n\t - Interval range (for example, U+400-4ff)<\/strong>: indicates the start and end codepoints of a range of characters.<\/li>\n\n
- Third-party hosting<\/strong>: Using a font service like Adobe Typekit, Fonts.com or Google Fonts.<\/li><\/ul>
- Webfonts<\/strong>: These are fonts that are not pre-installed and must be downloaded by the browser before they are displayed.<\/li><\/ul>