Preconnect and Font Optimization

Font Optimization for

Using display=swap with a font stylesheet provides the use of font swap feature of modern browsers.

The following allows for faster font loading:

 <link rel="dns-prefetch" href="">
 <link rel="preconnect" href="" crossorigin>

2022 April update: I have taken the leap and self hosted the font. So it is one font specified in the one css that I already use and it downloads one woff2 file from my server. This eliminates connection to 2 more servers and download of 4 more files. That is significant! I have also moved away from swap and taken the risk of display=block to reduce Cumulative Layout Shift.

I also use link preload in my html header to load the font file in parallel with the CSS.