Replace Google fonts with self-hosted fonts

[AlexanderZeilmann]

The Problem

This might be relevant to you if you are based in the European Union.
Google fonts is not GDPR compliant (General Data Protection Regulation by the EU) see here for a court case in german, tldr: the website owner had to pay 100€ to a user because Google Fonts was included without asking for permission.
Since asking the user for the permission to include a font is probably not a convenient idea, it is best to self-host the fonts.

Here is a short explanation of how this can be done. Maybe it is useful to someone.

The Solution

Use fontsource. It lets you install fonts like npm packages. Things you need to do:

1. remove the google fonts code from pages/_document.js
2. npm install -save @fontsource/<font-name>, repeat for all your fonts
3. Import the fonts in pages/_app.js:

import '@fontsource/roboto/400.css'
import '@fontsource/roboto/400-italic.css'
// Add more weights as needed

4. Optional: Remove *.googleapis.com and fonts.gstatic.com from Content Security Policy.

Variable fonts

Variable fonts can be imported using

import '@fontsource/roboto-mono/variable.css'
import '@fontsource/roboto-mono/variable-italic.css'

and replacing 'Roboto Mono' by 'Roboto MonoVariable' in your tailwind.config.js (or wherever you are setting the font).

Note, that this change alone does not make your site GDPR compliant, but it is a good start.

Other Advantages

See here

• Self-hosting brings significant performance gains
• Fonts remain version locked
• Your fonts load offline for PWAs

Alternatives

• https://google-webfonts-helper.herokuapp.com/fonts Not updated for several years
• https://nextgenthemes.com/google-webfont-downloader/ Only provides woff2 fonts

[timlrx]

Fontsource is a really nice approach! It's about as easy to integrate as Google fonts and is self-hosted. Will modify the default template to use this.

[AlexanderZeilmann]

I can send a PR if you want 🙂

[timlrx]

Sure, happy to accept a PR 😃

[timlrx]

Replaced Google Fonts with the self-hosted version in v1.5.0. Thanks @AlexanderZeilmann!

Information on the performance improvement is in the PR.

A short guide on the rationale for the change and how to customize the font is also included in the blog.