In an article that I posted some time ago, I talk about why you should store libraries locally. This also applies to fonts.

It’s true that some fonts you won’t be able to store locally (the Adobe fonts for example), but most of the others are available to be downloaded and used in your project. Google Fonts it’s no exception.

Google Fonts it’s the most popular fonts library and there is a reason why: it’s free and easy to use.

You go on the site, search for the font you like, select the font weights that you’re interested in, and get a code snippet that you can use to embed the fonts.

Just slap the code in the header part of your project and that’s it, you can start using the font families.

Copy Code 


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">

The downside is that you’re now depending on a 3rd party to deliver you assets that you rely on.

While Google Fonts it’s fast, it’s still an external request that is being made. And there is always the possibility that they update the font at some point and it might not render exactly as you had it in mind when you start using it. To be honest, this is less likely, but it happened.

The other problem is that Google Fonts doesn’t appear to be GDPR compliant, as a court in Germany found out.

How to store Google Fonts locally?

Go on the Google Fonts site, select the fonts that you like, but this time download them.

You will get an archive that contains all the fonts you need.

Go ahead and copy those fonts inside your projects, ideally in a folder called fonts. Now you have the fonts, start loading them into your project.

In the CSS file use @font-face to add the fonts and assign them a font-family, font-weight, and font-style. This way you can use the same font-family with different weights or styles (normal, italic).

Copy Code 


@font-face {
    font-family: 'Nunito';
	src: local('☺'), url('../fonts/Nunito-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: local('☺'), url('../fonts/Nunito-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
    font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: local('☺'), url('../fonts/Nunito-Bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: local('☺'), url('../fonts/Nunito-Bold.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
    font-display: swap;
}

Be sure to place the @font-face rules in the correct order:

  • from smaller font-weight to higher
  • from normal font-style to italic

Nunito with font-weight: 400 and font-style: normal will be before Nunito with font-weight: 400 and font-style: italic.

Nunito with font-weight: 600 and font-style: normal will be after all the font-weight: 400 records for this font-family ends.

That’s it!

You’re now using Google Fonts locally and you don’t have to worry about 3rd party dependencies or GDPR compliance for the fonts.