Google Fonts CSS Generator
The Google Fonts CSS Generator helps you add Google Fonts to your website. Browse all 1,800+ font families, preview each one in every weight and style with your own text, and tick the styles you need. You can combine several families, and the generator writes the HTML <link> tags, the CSS @import and ready-to-use CSS rules for you.
Prefer to host the fonts yourself? The Self-host tab downloads the .woff2 files and a ready-made fonts.css in one zip, so your pages don't need to connect to Google at all.
Loading the Google Fonts list…
Tick the styles you need
Your fonts
Tick at least one style above to get the code.
Download the .woff2 font files and a ready-made fonts.css in one zip. Upload both to your site, link fonts.css, and your pages load the fonts from your own server with no requests to Google.
That's a lot of styles. Every one is a separate download, so consider fewer weights, or a variable font, to keep your pages fast.
About Google Fonts CSS Generator
The Google Fonts CSS generator is a tool that allows you to create custom CSS code for using Google Fonts on your website. Google Fonts is a directory of well over 1,500 open-source fonts that you can use for free on your website. Google Fonts generators make it easy to get started with using Google Fonts by providing you with the necessary CSS code that you can simply copy and paste into your website's CSS file.
To use the Google Fonts CSS generator, simply select the font that you want to use on your website and the generator will provide you with the necessary CSS code. You can then copy and paste this code into your website's CSS file.
Here are some of the benefits of using a Google Fonts generator:
- Easy to use: Google Fonts CSS generator is very easy to use, even for beginners.
- Save time: Google Fonts generator can save you a lot of time by automatically generating the CSS code that you need to use Google Fonts on your website.
- Pick exactly what you need: choose the weights and italics you will actually use, combine several families in one request, or request the full weight range of a variable font.
- Fast loading: the code uses preconnect hints and font-display, and the CSS2 API serves small, compressed woff2 files split by language, so browsers only download what a page needs.
- Self-hosting: download the woff2 files and a matching fonts.css to serve the fonts from your own server, which avoids extra connections and keeps visitors' data away from third parties.
Overall, Google Fonts generators are a great way to get started with using Google Fonts on your website. They are easy to use, save you time, and help you load fonts efficiently. This tool is useful for web designers and developers who want to quickly and easily incorporate custom fonts into their web projects without the need for extensive coding. By generating the necessary CSS and providing a preview of the fonts in action, they simplify the process of using Google Fonts in web design.
Frequently Asked Questions
Should I use the <link> tag or @import for Google Fonts?
Use the <link> tags in your HTML head. They let the browser find the font stylesheet straight away, while @import inside a CSS file is only discovered after that CSS file has downloaded, which delays the fonts. The preconnect hints in the snippet speed up the connection to Google's servers even more.
Is it better to self-host Google Fonts?
Often, yes. Self-hosting removes the connection to two extra Google domains, lets you serve the fonts with your own caching and HTTP/2, and keeps visitors' IP addresses away from Google, which matters under privacy laws such as the GDPR. Browsers no longer share a font cache between websites, so loading fonts from Google gives no caching advantage. The Self-host tab downloads the woff2 files and a ready-made fonts.css for you.
What does font-display: swap do?
It tells the browser to show the text straight away in a fallback font, then swap to the web font once it has loaded, so text is never invisible while fonts download. optional is a good alternative when you would rather avoid the visible swap: the browser uses the web font only if it loads almost immediately.
What is a variable font?
A variable font holds a whole range of weights, and sometimes widths or other styles, in a single file. Instead of downloading separate files for 400, 500 and 700, you load one file and can use any weight in its range, such as font-weight: 450. Fonts marked VF in the list are variable; tick Use any weight to request the full range.
How many fonts and weights should I load?
As few as you can. Each style is a separate download, so two families with two or three weights each is a good limit for most sites. A variable font is usually the most efficient way to use many weights of one family.