Fraser Hamilton

Getting started with Google Fonts

July 14, 2020

The font you choose for your website can really make or break your design. One of the best resources for free licensed font families is Google Fonts. Currently they have 993 fonts that you can add to your sites or web apps in just a few minutes.

Fonts Home

Once you choose a font you like we can go about adding it to your site. For the rest of this tutorial I’m going to use a personal favourite of mine, Merriweather.

On a fonts specimen page you can see how each individual character will be rendered as well as pick from different styles of that font. For Merriweather we can see this includes mainly font weights ranging from 300 - 900 and also some italic variations of these weights.

Merriweather Styles

Merriweather Glyphs

Another useful part of this page is right down the bottom, the pairings section. Here we can see other fonts that are often paired with Merriweather on the Web. As well as a preview of both being used in a realistic scenario.

Merriweather Pairings

So how do we add this font to our website? Well It’s actually very simple, scroll back to the top of the page and select the styles you want. As you select them you’ll see them appear on the selected family pane on the right.

Selected Pane

Once you’ve picked the styles you want click on the embed heading within the selected family pane and you’ll get instructions on how to add it.

Selected Pane Embed

So to add the fonts I’ve selected here I just need to add this link tag to my html:

<link
  href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap"
  rel="stylesheet"
/>

And then use this CSS to specify the font:

font-family: 'Merriweather', serif;

You can see from the CSS that we’ve defined a fallback font serif, this will be the font used if we fail to fetch Merriweather from Google Fonts.


Written by Fraser Hamilton a full stack developer based out of Edinburgh, Scotland.

© 2020, Fraser Hamilton