Did you know Google Fonts affect GDPR? How-to gudie on self hosting Google Fonts on your own website

Google provides a free CDN for their web fonts, but according to the German government, using the CDN has GDPR implications. However, you can self-host the fonts on your own site, which can improve your site’s performance and address privacy concerns related to GDPR compliance. This article will guide you through the simple three-step process of self-hosting Google Fonts.

Why Self-Host Google Fonts?

There are two main advantages to self-hosting Google Fonts:

1. Improved Performance: Self-hosting can reduce loading times by eliminating the need for additional DNS lookups and third-party connections.
2. Privacy Compliance: In 2022, Germany ruled that embedding fonts directly from Google violates GDPR regulations. Self-hosting helps you avoid potential legal issues related to user tracking.

How to Self-Host Google Fonts in 3 Steps

1. Download the Font Files

First, you’ll need to obtain the font files:

1. Visit the Google Webfonts Helper.
2. Search for your desired typeface.
3. Select the character sets you need (e.g., Latin, Cyrillic).
4. Choose the styles and weights you want to use (e.g., italic, bold).
5. Select your browser support option (recommended: “Modern Browsers”).
6. Click the “Download” button to get your font files.

2. Upload the Fonts to Your Server

Once you have the files, upload them to your server using your standard deployment process:

• Use an FTP client
• Upload through a GUI (like the WordPress file uploader)
• Push to your codebase repository (e.g., GitHub)

Treat these font files like any other assets you host, such as CSS or JavaScript files.

3. Load the Font on Your Site

After uploading, you need to implement the fonts in your CSS. The Google Webfonts Helper conveniently provides the necessary CSS code.

Here’s an example CSS file for the Merriweather font with regular, italic, bold, and bold italic styles:

/* merriweather-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/merriweather-v30-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/merriweather-v30-latin-italic.woff2') format('woff2');
}

/* merriweather-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/merriweather-v30-latin-700.woff2') format('woff2');
}

/* merriweather-700italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/merriweather-v30-latin-700italic.woff2') format('woff2');
}

Copy this code into a CSS file (such as fonts.css), update the url() paths to match where you’ve stored your font files, and include this CSS file in your site like any other stylesheet.

Finally, remember to declare the font-family in your CSS:

body {
	font-family: "Merriweather", serif;
}

Notice that the Webfonts Helper automatically adds the font-display: swap property, which improves font loading performance by displaying a system font until your custom font is ready.

Conclusion

Self-hosting Google Fonts isn’t complicated and offers tangible benefits for your website’s performance and privacy compliance. By following these three straightforward steps, you can easily implement self-hosted fonts on your website and provide a better experience for your visitors whilst maintaining GDPR compliance.

If you’re looking to avoid the need for a cookie banner, using an alternative to Google Analytics and self-hosting Google fonts are both great ways to do this. If you need a web developer to help you do this, get in touch