Base64 Encode Fonts for CSS @font-face Embedding
Quick Answer: Convert font files to Base64 for embedding in CSS @font-face declarations. This eliminates separate font file requests, useful for critical fonts that must load instantly or when reducing HTTP requests.
FAQ
Should I Base64 encode fonts?
Only for small fonts or critical single-weight fonts. Base64 increases CSS file size by 33%. For most sites, serving WOFF2 files with preload is more efficient.
What format should I Base64 encode?
Prefer WOFF2 -- it is the smallest format. The data URI in CSS uses: src: url(data:font/woff2;base64,...) format("woff2").