What is the Google Fonts Generator?
Build your Google Fonts @import URL by selecting fonts and weights. Preview the font before generating the optimized embed code.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the Google Fonts Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Select fonts and weights
Search for fonts and check the weights you need. Only select weights you actually use in your CSS - each adds download size.
Preview the combination
Type sample text to see how the selected fonts and weights render together. Verify readability at both heading and body sizes.
Copy the embed code
Click Copy to get the optimized link tags with preconnect and display=swap. Paste into your HTML head before your main stylesheet.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
<!-- In <head>, before your stylesheet --> <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;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
The two preconnect links warm up the connection to Google Fonts servers before the browser encounters the stylesheet request, reducing load latency.
Pro tips for better results
Always add display=swap
Without display=swap, text is invisible until the font loads. With swap, the browser shows a fallback font immediately and swaps in the web font when ready, preventing blank text during load.
The preconnect links reduce font load time
Adding rel="preconnect" for fonts.googleapis.com and fonts.gstatic.com tells the browser to open the connection early. This can save 100-300ms on first font request.
Consider self-hosting for best performance
Download fonts from fonts.google.com and host them yourself. This eliminates external DNS lookups and the Google Fonts CDN round-trip. WOFF2 is the format to use - it is supported everywhere and is the smallest.
Use the Google Fonts API subset parameter for Latin-only sites
Adding &subset=latin to your URL can reduce font file size if your content only uses Latin characters. The default includes many extended character sets.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.