Michael Gearon

How to use Google Fonts on your website

Michael Gearon

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:

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.

Link

<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 of your html, for example it could look like this:

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

@import

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.

https://alligator.io/css/using-google-fonts/

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. 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.