Font loading
Font Embed Generator
Generate a Google Fonts link tag, CSS @import, @font-face declarations for self-hosting, and font-family fallback stacks in one place. Pick the fonts and weights you need, choose a font-display strategy, and copy production-ready code.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Shows text in a fallback font immediately, then swaps to the web font when it loads. Prevents invisible text.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair%20Display:wght@600;700&display=swap" rel="stylesheet">Paste this into the <head> of your HTML. The preconnect hints warm the DNS and TLS connection to Google's font servers.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair%20Display:wght@600;700&display=swap');Alternative to the link tag. Put this at the top of your CSS file. Note that @import blocks parallel downloads, so the link tag is preferred for performance.
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;Preview in Inter with fallbacks.
font-family: Playfair Display, ui-serif, Georgia, Cambria, Times New Roman, serif;Preview in Playfair Display with fallbacks.
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-500.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-700.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'Playfair Display';
src: url('/fonts/playfair-display-600.woff2') format('woff2');
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'Playfair Display';
src: url('/fonts/playfair-display-700.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}For self-hosting. Download the WOFF2 files from Google Fonts, place them in /fonts/, and use these declarations. The font-display: swap value is set from your selection above.
Only preload fonts that appear above the fold. Preloading every font wastes bandwidth on fonts the user may never see. For most sites, preload only the body font at weight 400.
How to Load Web Fonts
There are two paths to load a web font. The Google Fonts CDN path adds a link tag to your HTML and lets Google serve the WOFF2 file from its edge. The self-hosting path downloads the WOFF2 file, places it in your project, and serves it from your own origin. Each has tradeoffs.
The Google Fonts CDN is simpler. One link tag and you are done. Google handles subsetting, unicode-range, and format negotiation. The tradeoff is an extra DNS lookup and TLS handshake to fonts.gstatic.com, and the user's IP address is sent to Google (a GDPR consideration in some jurisdictions).
Self-hosting eliminates the cross-origin overhead and the IP sharing. The tradeoff is that you manage the WOFF2 files and the @font-face declarations yourself. This tool generates the declarations for you. For popular fonts like Inter, the CDN's cross-site cache is faster on average because visitors who already have the font cached get it for free.
The Font-Display Strategy
The font-display CSS property controls what the browser shows while a web font is loading. The right choice prevents invisible text and layout shift.
swap shows text in a fallback font immediately, then swaps to the web font when it loads. This is the recommended default for body text, because the user sees content right away.
fallback hides text for up to 100ms, then shows the fallback, then swaps if the font loads within 3 seconds. This is a good choice for headings where a brief invisible period is acceptable but you want the final font to appear.
optional lets the browser decide based on network conditions. On a slow connection, the browser may never swap to the web font. Use this for non-critical fonts where the fallback is acceptable.
block hides text for up to 3 seconds. Avoid this for body text, because it causes a flash of invisible text that hurts LCP and user experience.