The @font-face Data URI Approach
Instead of pointing @font-face to an external URL, you embed the encoded font directly: src: url('data:font/woff2;base64,...'). The browser reads the font data directly from the CSS rather than making a separate request. This ensures the font loads with the stylesheet, preventing flash-of-unstyled-text.
Size Impact
Fonts range from 20KB for a minimal subset to 500KB+ for a full Unicode font file. Base64 adds 33%, and more critically, embedding fonts in CSS prevents independent caching of font files. If the CSS file changes for any reason, the entire font re-downloads.
Subsetting Before Encoding
Before embedding a font, subset it to include only the characters actually used in your application. Tools like pyftsubset can reduce a 400KB font file to under 30KB for English-only applications. Subsetted then Base64-encoded fonts can be efficiently embedded.
When External Fonts Win
Google Fonts and other CDN-served fonts are cached globally — a user who visited another site using the same font already has it cached. Embedding eliminates this cache benefit. For popular fonts served by major CDNs, external loading with preconnect hints often produces better real-world performance.
Embed Base64-encoded fonts only after subsetting and only when eliminating font-related FOUT matters more than the caching benefits of external font files.