Google provides a free to use service that allows you to access thousands of fonts. All of the fonts are under the Open Source licenses, meaning they’re free to use for both commercial and non-commercial projects.
Selecting your fonts
The first step is to head over to Google Fonts and select the fonts you want to add to your website. You can select the exact font and weight by pressing the plus (+) button next to each style of font.
The reason why Google allows you to select each style is that often you don’t need all of the styles so you can create a custom link for the styles you need and not load font styles that won’t be used. This is better for web performance.
Google Fonts allows you to filter by:
- Category – serif, sans-serif, display, handwriting, monospace
- Font properties
There is also an optional toggle to show only variable fonts. You can also search for the exact font if you know what you’re looking for. When you preview the fonts you can type in your letters and numbers to preview the font with those characters.
Embedding your Google Fonts
There are two ways to embed your Google Fonts, one which is more recommended over the other.
of your html, for example it could look like this:
<link> is the recommended way to embed your fonts. This tab is shown by default when your on the embed tab in Google Fonts. You place the in the
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
The not so recommended route is to use the @import, which could be added in your CSS. The reason why it’s not recommended is that it isn’t great for performance, so try to avoid this route if possible.
Michael Gearon is a Senior Interaction Designer at Government Digital Service (GDS) in Cardiff. Michael Gearon is one of the authors of The Tiny CSS Projects book, published by Manning Publications. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.