Font Preload

Font Preload is the link rel=preload as=font tag placed in the document head that forces the browser to fetch your Latin variable font subset with high priority before it finishes parsing CSS. For variable fonts this single directive changes everything because those files sit at 120 to 250 kilobytes even after optimization. The tag looks like this. link rel=preload href=/fonts/yourfont-latin.woff2 as=font type=font/woff2 crossorigin. It belongs immediately after your meta charset and before any stylesheet links. The browser starts the download during HTML parsing instead of waiting for the late discovery that normally happens when it hits your @font-face block. This cuts largest contentful paint by hundreds of milliseconds on every font heavy page. Variable fonts make the technique mandatory because one file carries every weight and axis your design uses. Without the preload that heavy payload blocks text render and inflates Core Web Vitals scores. Add the crossorigin attribute or Safari will ignore the cached font and request it again. Omit the type attribute and some browsers deprioritize the fetch. The details matter. Variable fonts change the math because one well subsetted file replaces four to seven static cuts but still needs every millisecond of head start you can give it. Teams that get this right ship expressive typography at half the byte cost of their old static stacks. Teams that get it wrong load 600 kilobyte monsters and wonder why their LCP dies. Preload is the lever that tips the scale. It is not a cure for sloppy subsetting or missing font display rules. It is not permission to preload every axis or language extension you own. Preload the Japanese subset or the decorative italic variant used on one pull quote and you burn user bandwidth while starving your hero image and critical CSS of network slots. It is not a replacement for metric matched fallbacks. You can preload the perfect file but without ascent override descent override line gap override and size adjust tuned to your exact variable font the swap still causes visible layout shifts. It is not the same as prefetch which carries lower priority for future navigations. Preload is strictly for assets the current page needs above the fold. Many teams in 2023 added preload links but kept using unoptimized full variable fonts with every custom axis still embedded. Their Lighthouse scores actually dropped because the high priority request competed with render blocking resources. Preload only wins inside the full loading recipe of subset first preload second font display swap third and metric matched fallback fourth. Miss any step and the whole chain breaks. Vercel ships Geist variable with a preload targeting their 138 kilobyte Latin subset produced by pyftsubset. The link sits in every production head. They pair it with next/font generated fallback metrics so the swap from system UI to variable is invisible. Their 2024 templates keep LCP under 1.5 seconds and CLS at zero even on Slow 3G. Linear copied the exact pattern for Inter variable in their 2023 dashboard redesign. The preload hits only weights 400 to 700 because that is the exact range their UI uses. Before the change their throttled load times sat at 3.2 seconds. After preload plus matched fallback the number fell to 1.8 seconds with zero layout shift. GitHub preloads Mona Sans variable but only the condensed width range their headers actually interpolate across. Their subset drops every glyph not present in UI strings and octicons. The file lands at 87 kilobytes. Apple Music preloads San Francisco variable with both weight and optical size axes active. The optical size adjustment for player text happens without any flash because the file is already local by first paint. The New York Times applies it to their custom variable serif for article openers. Optical size and weight transitions fire immediately instead of after a 900 millisecond delay that used to push their LCP into the red. Stripe Press preloads a trimmed variable display font that only includes the weight width and opsz ranges their scroll driven animations actually touch. The preload runs before their stylesheet so the editorial headline paints with full refinement on load. Figma uses the same discipline for Inter Display variable across their entire canvas. The preload comes from their CDN with proper CORS headers. Text never flashes fallback even when users open complex files. These teams all run the same checklist. One preload per page. Exact URL match between link and @font face. Subset file under 200 kilobytes. Metrics matched with Fontaine or next/font. Lighthouse green on font related audits. They never preload a file they are not 100 percent certain will paint above the fold. Use font preload on every production page that ships a variable font over 80 kilobytes and uses three or more weights or any axis animation. Use it when your design system tokens map directly to variable axes and when text occupies the hero or navigation. It becomes non negotiable the moment Core Web Vitals audits flag font related LCP or CLS problems. The technique pays for itself by protecting largest contentful paint and eliminating invisible text stages that kill perceived performance. Do not use it when your entire type stack is system fonts or when total font payload stays under 60 kilobytes. Skip it for any secondary language subset icon font or decorative file that appears below the initial viewport. Never preload more than one or two files per page. The browser only has so many high priority concurrent slots at the start of a load. Fill them with critical CSS your hero image and the Latin variable subset. Everything else can discover itself later through unicode range. The most expensive mistake is a preload URL that does not exactly match the CSS declaration. The browser will download the file twice once from the preload hint and once when it parses the stylesheet. This exact error added 240 unnecessary kilobytes to every page load for one fintech team in early 2023 until their build plugin was fixed to inject matching links automatically. Always test with the network tab filtered to fonts. The preload request must show as high priority and begin during HTML parsing. Use WebPageTest filmstrips to confirm the fallback never causes visible shift. Run Lighthouse in CI with throttling turned on. If the font still arrives after first paint your link order is wrong or the href points at the wrong subset. Variable fonts change the preload calculus because one file replaces many. A static setup might preload two or three individual weights. With variable you preload one but that one must be trimmed ruthlessly with axis range subsetting and pyftsubset. Drop unused portions of the weight axis if your design never goes below 400 or above 700. The saved bytes mean the preloaded payload arrives even sooner. Combine it with unicode range declarations for Latin extended and you get progressive enhancement where only the characters on the actual page trigger extra downloads. This is exactly how Google Fonts operates at global scale and it is the pattern every self hosted variable font stack should copy. Preload the right Latin variable font subset with precision or watch your typography become the bottleneck that kills every Lighthouse score.