How to load font locally, not from Google (it's a violation of European privacy law)

help
1

There’s a recent wave of cease & desist letters to German websites as the lawyers see them in violation of the German DSGVO (EU data privacy law, see What is the DSGVO? A compact summary -luckycloud blog) which is more commonly known as GDPR.

This will affect also website owners outside of Germany when users from the EU are visiting their website.

The core point of these letters claim that the fonts are transmitting the IP address of the European user to Google servers in the US (or anywhere outside of the EU).

In my case I load these in the following way:

On my landing page (filename styles.css):

@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,200,500,600,700&display=swap");

In my Electron app/after Meteor login (different Meteor project than the landing page) - filename electron-layout.html:

<template name="electronLayout">
    {{> Template.dynamic template=main}}
    {{> infobox}}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,200,500,600,700" type="text/css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</template>

How can I load these fonts locally instead of requesting them from Google?

Sorry if this is a noob question but I’m a backend developer and the frontend (including this code) was developed by a former employee.

Thanks in advance!

PS: if you want to check if your website is affected, this URL has a scanner for it: Abmahnungen wegen Google Fonts. So handeln Sie richtig! (website is in German)

2

You can use @font-face How to use @font-face in CSS | CSS-Tricks - CSS-Tricks

3

Thank you for the link to the article.

What’s the recommendation to put the font files itself? How much better would it be to load them from a CDN (which again would have unclear legal implications I guess)?

4

You can put the font files in /public and optionally preload them with <link rel="preload" as="font"... See more here: Preload web fonts to improve loading speed

Unfortunately, I’m not familiar with how GDPR treats loading them from a CDN. Hopefully someone can enlighten us :slight_smile:

5

CDNs (like Cloudflare) usually serve the content from the nearest server (to the user). So seems that German users will receive content from German servers.

But if you need to serve content from your server, you can use reverse-proxy like Nginx which can help with content cache.

There is a good service for downloading google fonts - google webfonts helper

1 Like