Preview any Google Font or system font live with your own text — adjust size, weight, line height, letter spacing and colour, then copy the CSS instantly.
Search for any Google Font by name or choose a system font. The font loads instantly from the Google Fonts API.
Set size, weight, line height, letter spacing, colour and transform. The preview box updates live with every change.
Click Copy CSS to get the complete Google Fonts import URL and CSS rule ready to paste into your stylesheet.
Over 1,500 Google Fonts are available, loaded directly from the Google Fonts API. This includes serif, sans-serif, display, handwriting/script and monospace categories. System fonts (Arial, Georgia, Verdana, Helvetica, Times New Roman, Courier New, system-ui) are also available without any network loading.
The previewer lets you adjust: font-family, font-size (px), font-weight (100 Thin through 900 Black), font-style (normal, italic), line-height (unitless ratio), letter-spacing (px), text-transform (none, uppercase, lowercase, capitalize), color and text-align (left, centre, right). All changes update the preview live.
After selecting a font the Export CSS panel shows the complete @import URL and font-family rule. For example: @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); and font-family: "Inter", sans-serif. Copy this directly into your CSS or paste the URL as a link element in your HTML head.
Yes — the Type Scale panel shows your chosen font rendered at 12px, 14px, 16px, 20px, 24px, 32px, 48px and 64px simultaneously. This helps you assess how the font performs across different use cases — body text, captions, headings and display sizes — and identify which weights look best at each size.
Font weight names and numbers are equivalent: 100 (Thin), 200 (ExtraLight), 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold), 900 (Black). Only weights that the selected font actually includes are usable — not all fonts have all nine weights.
Yes — the exported CSS includes a sensible fallback stack for the font category. Sans-serif Google Fonts get: "FontName", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif. Serif fonts get: "FontName", Georgia, "Times New Roman", serif. Monospace fonts get: "FontName", "Consolas", "Monaco", monospace.
Yes — the preview box is a contenteditable element. Click directly into it and type your own text — your company name, a headline, body copy sample or any string. The preview updates immediately to show exactly how your content looks in the selected font and with the current styling settings.
Yes with an important caveat: email clients especially Outlook on Windows have limited web font support. Use the previewer to choose a web font then test the fallback by removing the font to see how the email looks in clients that do not support web fonts. Georgia and Arial are the safest serif and sans-serif fallback choices for email.
Yes — Google Fonts includes many variable fonts with multiple variation axes. When a variable font is selected the weight control operates across its full variable range. The CSS output uses font-weight for the weight axis which all modern browsers support natively for variable fonts.
Fonts are loaded lazily only when you select them. The tool requests only the specific font family you choose from Google Fonts API. Once loaded the font is cached by your browser so switching back to a previously loaded font is instantaneous. The tool does not preload the entire font library.
