src/data/best-practices/frontend-performance/content/use-preconnect-to-load-fonts.md
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
When you arrived on a website, your device needs to find out where your site lives and which server it needs to connect with. Your browser had to contact a DNS server and wait for the lookup complete before fetching the resource (fonts, CSS files...). Prefetches and preconnects allow the browser to lookup the DNS information and start establishing a TCP connection to the server hosting the font file. This provides a performance boost because by the time the browser gets around to parsing the css file with the font information and discovering it needs to request a font file from the server, it will already have pre-resolved the DNS information and have an open connection to the server ready in its connection pool.
Before prefetching your webfonts, use webpagetest to evaluate your website
Look for teal colored DNS lookups and note the host that are being requested
Prefetch your webfonts in your <head> and add eventually these hostnames that you should prefetch too
Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog
A Comprehensive Guide to Font Loading Strategies—zachleat.com