How to Use Google Fonts Locally in WordPress with Kadence

In January, a German court fined a website for leaking a visitor’s IP address via Google Fonts. By using Google’s servers for fonts used on the site, the website violated the EU’s General Data Protection Regulation (GDPR). Termageddon, a resource for understanding website privacy laws and compliance, weighed in on this recent decision. 

While an IP address might not seem like something that is within the scope of data protection regulations, it is considered personally identifiable information (PII) that could be tied to an individual person. As such, it was ruled by the German court to be in violation of GDPR. 

This has created some concern with web developers and site owners looking to ensure they are not at risk of violating GDPR from simple font usage, and some site owners are looking for ways to protect themselves. According to BuiltWith, over 50 million websites use Google Fonts on their sites.

Whether or not this ruling in a German court will have far reaching effects remains to be seen. This case is ongoing, and this article is by no means legal advice. However, we did want anyone concerned with using Google Fonts to understand that there are easy to implement solutions, and that Kadence offers two such solutions.

Other Advantages of Using Locally Hosted Fonts

Beyond the regulatory issues, there are other advantages to using Google Fonts locally instead of relying on Google’s content delivery network. As of October 2020, Chrome moved to HTTP cache partitioning, which means that Google Fonts are redownloaded for every single website. Even if a font is already cached in the user’s browser while they’re visiting your site, they’ll still re-download the font from Google’s servers, eliminating the benefit of using Google’s CDN for fonts on your site. 

Now, it’s much faster to locally host Google Fonts. This means that you store web fonts on your server, or your own content delivery network, instead of relying on Google. 

There are other benefits including:

• Reduce third party lookups. The fewer DNS requests you have, the faster your site will be. 
• Preloading your Google Fonts and add CSS properties that provide a better user experience. 
• Eliminate Lighthouse page speed measurement warnings such as “reduce the impact of third-party code.”

Of course, if you’re hosting on a shared server that may be maximized in terms of resource utilization, you may want to rely on external services for things like fonts. Whatever you choose, Kadence offers options to help locally host fonts if that is something you require.

Host Fonts Locally with Kadence

Kadence allows you to host your fonts locally. Simply go to the WordPress Customizer, and navigate to General > Performance.

Under Performance, you’ll see options to Load Google Fonts Locally as well as Preload Local Fonts. When you change these settings, we recommend flushing local font files to clear cache.

Using Kadence Custom Fonts Plugin to Locally Host Fonts

Kadence Bundle customers have another tool that can help. Kadence Custom Fonts allows you to host your fonts on your own site rather than using Google’s content delivery network (CDN). You can download the Kadence Custom Fonts plugin from your account dashboard and install it on your site using the “Add New” and “Upload Plugin” capability on your WordPress administrative dashboard. Just add the Zip file to your site, and activate the plugin.

Kadence Custom Fonts will then appear as an option under Appearance > Kadence. 

To use Kadence Custom Fonts to serve your fonts locally, you’ll need to add the fonts to your site, so click “Add New Custom Font” in the Custom Fonts area of your site.  

You’ll need to download a Web Open Font Format (WOFF) file of the Google Font you are using. In order to obtain that WOFF file, a great resource is the Google Webfonts Helper. There you can find your fonts and download WOFF files that you can then use on your site. 

Once downloaded, simply unzip the file from Google Webfonts Helper, and add each file to Kadence Custom Fonts in the correct file format position. 

You’ll want to also add a “local” filename to the custom font you’re adding, such as in the screenshot above. 

Then click “Publish.” Once published and available to your site, your local font is then available to use on your site. 

Continue to Monitor Legal Rulings

GDPR was enacted in the European Union in April 2016, and we’ve only recently started to see some significant rulings coming forward from European courts. An Austrian court even recently ruled that Google Analytics was in violation of GDPR, and as Wired notes, this may be just the beginning of regulatory crackdowns on big tech. At the moment, the Austrian ruling only applies in Austria and isn’t final, but as site owners, these are rulings that we’ll need to continue to monitor. 

At Kadence, we’re committed to helping you create effective websites, not only in meeting your customer needs and marketing objectives, but also in meeting the needs of a changing regulatory landscape. Kadence Custom Fonts is just one way we hope to provide value to you and the sites you create.   

If you don’t yet have a bundle to use Kadence Custom Fonts, you can get the bundle that best suits your needs below. At the time of publication, we’re offering a 25% off any annual bundle. This sale ends tomorrow, February 22, 2022.