Google Fonts CSS Generator
Generate correct Google Fonts embed code for any family and weight selection. Produces HTML link tags with preconnect, plus a CSS @import option.
How to use
- Enter the Google Font family name (e.g. Inter, Playfair Display).
- List weights separated by semicolons (400;500;700).
- Copy the HTML or CSS output into your project.
Frequently asked questions
Why does Google Fonts need preconnect?
Preconnect establishes the TLS handshake to fonts.gstatic.com in advance, reducing first-render font latency by 100–300ms.
Should I use link or @import?
Use link in the HTML head. @import blocks rendering and is slower. @import is only appropriate when you cannot edit HTML.
Should I include display=swap?
Always. display=swap prevents invisible text while fonts load, improving Core Web Vitals FCP and LCP.
Can I self-host Google Fonts?
Yes. Download the WOFF2 files and use @font-face locally. This eliminates the third-party request but requires manual updates.