Using Google Fonts GDPR compliant with NGINX

Using Google Fonts on your webpage is, according to the latest court ruling from the Munich District Court from the 20th of January 2022 (file no. 3 O 17493/20), not complient with the GDPR.

You may ask why? Because the webpage then performs requests to a server from google and therefore the ip address of the user is transmitted to a company outside of europe.

Isn't this covered by the legitimate interest (GDPR Art. 6 Par. 1 S. 1 lit. f) I have as a website owner to use appealing fonts? The short answer: No. The use cannot be based on the legitimate interest, as the use of google fonts is also possible without a connection from visitors to Google servers.

NGINX Configuration

But dont panic! We can simply use the power of NGINX to get rid of a connection to a Google server and instead use our server to proxy the requests.

Create a new "shared" configuration file at your nginx config folder (e. g. /etc/nginx) at snippets/gfonts-proxy-common.conf with the following content:

# disable gzip response, otherwise sub_filter cannot parse it
proxy_set_header Accept-Encoding "";

sub_filter_types text/css text/xml text/javascript;
sub_filter //fonts.googleapis.com/ //gfonts-googleapis.yourdomain.tld/;
sub_filter //fonts.gstatic.com/ //gfonts-gstatic.yourdomain.tld/;
sub_filter_once off;

Next, create your server blocks to proxy the requests. Put them somewhere in your sites-available / sites-enabled folder.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name gfonts-gstatic.yourdomain.tld;

    include your_tls_configuration;

    location / {
        proxy_pass https://fonts.gstatic.com/;
        proxy_connect_timeout 3s;
        proxy_set_header Host fonts.gstatic.com;
        include snippets/gfonts-proxy-common.conf;
    }
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name gfonts-googleapis.yourdomain.tld;

    include your_tls_configuration;
    
    location / {
        proxy_pass https://fonts.googleapis.com/;
        proxy_connect_timeout 3s;
        proxy_set_header Host fonts.googleapis.com;
        include snippets/gfonts-proxy-common.conf;
    }
}

Now you can include your snippet in any site or location block you want to rewrite Google Fonts using include snippets/gfonts-proxy-common.conf;. After applying your nginx configuration, you should validate that the requests are now served by your gfonts-* domain. Open the developer tools using Ctrl + Shift + I, head to the Network tab and reload the page, filter the requests to only fonts and check the requests being made.

Doesn't this prevent using the CDN for caching? The short answer: No. You cannot use CDNs for cross site caching anymore, as browsers have changed their caching methods in the past due to privacy and anti-tracking reasons. A cache is only valid for the same origin. If the font would have been loaded on site-a.tld, visiting site-b.tld will not hit the same cache.

Source: https://www.golem.de/news/landgericht-muenchen-einbindung-von-google-fonts-ist-rechtswidrig-2202-162826.html, https://gist.github.com/gaoyifan/680da074330d2c499d6b