How to Self-Host Google Fonts and Avoid GDPR Violations

Google Fonts is a fantastic tool for any web development project. They offer more than 1,000 fonts in multiple styles, the platform is easy to use and you just need to copy and paste a few lines of code to start using all these fantastic fonts on your projects.

But using Google Fonts might cause a violation of GDPR laws in Europe.

GDPR

The General Data Protection Regulation (or GDPR) took effect in 2018 and it serves to ensure that Businesses in Europe apply data protection principles to keep customers’ data safe and private.

It’s important to mention that even if your business is not in Europe if you have visitors from Europe you still have to comply with its laws.

And What Does Google Fonts Have To Do With This?

If you use Google Fonts on your website, when a visitor loads one of your pages, the fonts must be downloaded locally so they render correctly in the web browser. Google needs to know where to deliver the fonts, so for that, it uses the visitor’s IP address.

And that’s where the problem is. Sharing your visitor’s IP address with Google constitutes a contravention of the user's privacy rights. At least that’s the opinion of a German court, which according to this article, has ordered a website operator to pay €100 in damages for transferring a user's IP address to Google through the use of Google Fonts.

Should We Stop Using Google Fonts?

Finding alternatives to Google Fonts would certainly not be something we developers would be happy to do.

But we need to comply with the laws to avoid legal problems and fines. So what do we do?

There’s actually an easy solution. You can continue to use Google Fonts without infringing any of the GDPR’s regulations, as long as you host the Google Fonts on your server. Let me show you how you can easily do that.

How to Host Google Fonts on Your Own Server

1. Select the font family

The first step would be going to Google Fonts and choosing the font-family you want for your project. You could download all font files by using the download family button:

The problem with doing it from Google Fonts is that you'll have to type all the font-face rules manually. So instead, use a tool called Google Webfonts Helper.

2. Select the charsets and styles

The default charset is Latin. If you need other alphabets for your project, make sure to select them.

Next, select the styles you want. For more flexibility, you can check all the styles so you have them in case you decide to use them later. This will make it heavier to load though, because you will need to download and host many more files.

If you are sure you'll only use some styles, make sure to leave the others unchecked.

3. Copy the CSS font-rules

If you select the Best Support option, you'll download 5 different file types for each style. Again, this will make it heavier, but may be a good option if you want to have full compatibility with all browser.

For most projects, the Modern Browsers option should be enough. In this case you'll download only two fil types per style (woff and woff2).

Notice that the default folder prefix is ../fonts/. If you use this preffix, make sure to place the font files in a folder called fonts, as we'll show in step 4.

Next, click inside the box with the CSS code to copy it and paste it in your CSS file. We recommend using a separate CSS file rather than pasting it in your main styles file. In the example show in the video, we created a file called font.css to paste the font-face rules.

4. Download the font files

Click the button to download the font files.

Create a folder called fonts in your project and paste the font files.

5. You are now self-hosting your desired Google Font

You are all set!