Frontend Performance Optimization Part 4 – Fonts

Good Typography is a fundamental requirement of any web design. Choosing the right Web font for your website improves Readability, Accessibility, and Trust in your brand. 

In Order to Provide a Great Visual Experience Website uses something called “Web Fonts” these fonts are the fonts that will not be available on User’s Computer and would need to be externally loaded through the font-face CSS3 property.

@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); }

A User Computer would generally contain something called “Web Safe Fonts” like Arial, Times New Roman, etc which can be used as fallback fonts if in case there is a problem with loading Web Fonts.

While implementing web fonts there are some essential points we should take care of so that we achieve the benefits without impacting the performance of the Site. Let’s discuss in this Article some points of Performance Improvements Related to Fonts.

1. 1 or 2 Fonts are enough. Don’t select too many Fonts. This helps in keeping the site clean and consistent and also prevents unnecessary load times.

2. Select the write Font Format – There are four types of font formats.

1. True Type Fonts.
2. Web Open Font Format
3. Web Open Fomt Format 2
4. Embeed Open Type

Loading a modern form like WOFF2 which is supported on 97% of browsers can achieve a 30% reduction in file size over other formats. So unless you have to use older browsers WOFF2 should just do the trick. Go to  CanIUse and see which browsers your type is supported and if you need to get support for further browsers. The Code below just tries to cover all possible scenarios. Please check the CanIUse website to see which one you really need to include.

@font-face { font-family: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
      url('webfont.woff2') format('woff2'), /* Modern Browsers */ 
      url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
      url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */            
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}

One other way of dealing with this can be to only use the woff2 font format and for unsupported browsers rely on fallback Web Safe fonts. Here ‘Open Sans’ is the Web Font and Arial and sans-serif will be fallback fonts.

body {
    font: 18px/28px 'Open Sans',Arial,sans-serif;
}

3. Use only required characters from fonts – A Font may contain characters from many languages (charsets) that we may not use on our Website. So only choose the languages you need this will reduce the size of the font download.

4. Use only styles that are needed -We might not need all the styles from a font so we only need to put the required styles in the Web Font declaration. This also saves download size same as above. Here for example go to  Google Fonts Open Sans and see that you can download the entire font or select specific styles. 

I have selected three styles that I would need and the interface gives me this code to put in my website.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">

5. Host fonts on your Server or use PreFetch The font above are loaded from Google Site, If we want to make the load faster you can host the font on your own server please remember that you own the font or its open-source before doing that. Or if this is not possible use a prefetch attribute on your font. pre-fetch allows resolving the DNS Name faster.

<link rel="dns-prefetch" href="//fonts.googleapis.com">

 These are some of the techniques I have used in my projects. Do you know of any other techniques related to optimizations with font? Please share in the comments.