DEV Community

Nevik Schmidt
Nevik Schmidt

Posted on

Stop Using Google Fonts — It's Costing German Websites Thousands in Fines

#webdev #privacy #css #tutorial

Stop Using Google Fonts — It's Costing German Websites Thousands

In January 2022, the LG München ruled that embedding Google Fonts without user consent violates GDPR. The defendant was ordered to pay €100 in damages plus legal costs. Since then, thousands of Abmahnungen have been sent.

If your website loads fonts from fonts.googleapis.com, you're exposed. Here's how to fix it.

Why Google Fonts Violates GDPR

When a browser loads a font from Google's CDN:

  1. The user's IP address is transmitted to Google
  2. Google can potentially link browsing sessions across websites
  3. This happens before any cookie consent is given

The court ruled this constitutes a transfer of personal data without legal basis under Art. 6(1) GDPR.

How to Check If Your Site Is Affected

Open your browser's developer tools → Network tab → Filter for fonts.googleapis.com or fonts.gstatic.com.

Or use an automated scanner:

🔍 Free DSGVO Scanner — checks for Google Fonts, Analytics, and 50+ other issues.

The Fix: Self-Host Your Fonts

Step 1: Download the Fonts

Visit Google Fonts and download your chosen fonts. Or use the google-font-download tool:

# Install the tool
npm install -g google-font-download

# Download Inter (regular + bold)
google-font-download -f Inter -s 400 -s 700 -t woff2
Enter fullscreen mode Exit fullscreen mode

Step 2: Serve From Your Own Server

Place the font files in your project:

/static/fonts/
├── inter-regular.woff2
└── inter-bold.woff2
Enter fullscreen mode Exit fullscreen mode

CSS:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-bold.woff2') format('woff2');
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Add Preload for Performance 

<link rel="preload" href="/static/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
Enter fullscreen mode Exit fullscreen mode

Step 4: Remove Google Fonts References

Remove ALL of these from your HTML:

  • <link href="https://fonts.googleapis.com/css2?...
  • @import url('https://fonts.googleapis.com/css2?...');
  • Any WordPress plugin that loads Google Fonts

WordPress-Specific Fix

Option A: Disable Google Fonts 

// functions.php
add_filter('wp_resource_hints', function($urls) {
    foreach ($urls as $key => $url) {
        if (strpos($url, 'fonts.googleapis.com') !== false) {
            unset($urls[$key]);
        }
    }
    return $urls;
});
Enter fullscreen mode Exit fullscreen mode

Option B: Use a Plugin

Install "Self-Hosted Google Fonts" or "OMGF" — they automatically download and serve fonts locally.

Option C: Switch to System Fonts

The safest option — no font files at all:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Vite/React Setup 

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[hash][extname]'
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Place fonts in public/fonts/ and reference with absolute paths.

Next.js Setup 

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  optimizeFonts: false, // Don't use Google Fonts optimization
}
Enter fullscreen mode Exit fullscreen mode

Use next/font/local:

import localFont from 'next/font/local'

const inter = localFont({
  src: [
    { path: '../fonts/inter-regular.woff2', weight: '400' },
    { path: '../fonts/inter-bold.woff2', weight: '700' },
  ],
  display: 'swap',
})
Enter fullscreen mode Exit fullscreen mode

Performance Impact

Self-hosting is actually faster than Google Fonts:

  • No DNS lookup to fonts.googleapis.com
  • No extra TLS handshake
  • Same-origin caching — your CDN/browser cache handles it
  • Preloading gives you full control over priority

In my tests, self-hosted Inter loads 50-100ms faster than the Google CDN version.

The Bottom Line

If you operate a website in Germany (or any EU country), loading Google Fonts without consent is illegal. The fix takes 15 minutes. Don't wait for the Abmahnung.

Check your website for free — our scanner detects Google Fonts, Google Analytics, missing legal pages, and 50+ other GDPR issues.

☁️ Need a Server for Self-Hosting?

I run all my services on Hetzner Cloud — EU-based, from €3.29/mo. Use my link and we both get €20 in credits.

🛡️ Is Your Website GDPR Compliant?

Check in 60 seconds: nevik.de/check — free DSGVO scanner.

💡 Tools I Built: bewertung.nevik.de (Google Reviews) · cv.nevik.de (Free CV Builder)

Follow me on Dev.to for weekly guides on self-hosting, AI tools, and growing your business.

Top comments (0)