Webfonts und Datenschutz: Alle Schriftarten DSGVO-konform einbinden

Webfonts sind ein fester Bestandteil moderner Websites. Doch ihre Einbindung über externe Server — sei es Google Fonts, Adobe Fonts oder Font Awesome von CDN — überträgt bei jedem Seitenaufruf die IP-Adresse deiner Besucher an den Schriftarten-Anbieter. Seit dem Urteil des LG München I (Az. 3 O 17493/20, Januar 2022) steht fest: Das ist ohne Einwilligung rechtswidrig und kann Schadensersatzansprüche auslösen. Dieser Artikel zeigt alle betroffenen Font-Services, erklärt Self-Hosting Schritt für Schritt und deckt Performance-Optimierungen ab, die über einfaches Umstellen hinausgehen.

Warum externe Fonts problematisch sind

Beim Laden einer Schriftart von einem externen Server passiert Folgendes:

Der Browser sendet eine HTTP-Anfrage an den Font-Server (z.B. fonts.googleapis.com)
Der Server erhält die IP-Adresse des Besuchers (personenbezogenes Datum, EuGH C-582/14 Breyer)
Der Server erhält den Referrer (welche deiner Seiten der Nutzer besucht)
Der Server erhält den User-Agent (Browser, Betriebssystem, Gerätetyp)
Optional werden Cookies gesetzt (z.B. bei Adobe Fonts)

Das LG München I hat in seinem Urteil vom 20. Januar 2022 entschieden: Das dynamische Einbinden von Google Fonts ohne Einwilligung verstößt gegen Art. 6 Abs. 1 DSGVO und gegen das allgemeine Persönlichkeitsrecht. Der Kläger erhielt 100 EUR Schadensersatz nach Art. 82 DSGVO.

Berechtigtes Interesse (Art. 6 Abs. 1 lit. f DSGVO) scheidet aus, weil Self-Hosting eine zumutbare Alternative darstellt. Wenn eine datensparsame Lösung existiert, kann die datenlastigere nicht auf berechtigtes Interesse gestützt werden.

Betroffene Font-Services

Service	Domain(s)	Typ	Cookies	DSGVO-Status ohne Consent
Google Fonts	`fonts.googleapis.com`, `fonts.gstatic.com`	Kostenlos	Keine eigenen, aber IP-Übermittlung	Rechtswidrig (LG München)
Adobe Fonts (Typekit)	`use.typekit.net`, `p.typekit.net`	Abo (Creative Cloud)	`s_cc`, `s_sq`, `AMCV_*`	Rechtswidrig (IP + Cookies)
Font Awesome (CDN)	`use.fontawesome.com`, `ka-f.fontawesome.com`	Freemium	Keine standardmäßig	Rechtswidrig (IP-Übermittlung)
Bootstrap Icons CDN	`cdn.jsdelivr.net`	Kostenlos	Keine	Problematisch (IP-Übermittlung)
Bunny Fonts	`fonts.bunny.net`	Kostenlos	Keine, kein Logging	DSGVO-konform (EU-Server, kein Logging)
Fontshare (Indian Type Foundry)	`api.fontshare.com`	Kostenlos	Undokumentiert	Unklar

Bunny Fonts ist die einzige externe Font-Lösung, die sich als DSGVO-konform positioniert: EU-Server, kein IP-Logging, keine Cookies. Es kann als Drop-in-Replacement für Google Fonts dienen (gleiche API-Struktur). Trotzdem bleibt Self-Hosting die sicherste Variante.

Self-Hosting: Schritt für Schritt

Methode 1: google-webfonts-helper (empfohlen für Google Fonts)

Der google-webfonts-helper ist ein Open-Source-Tool, das Google Fonts als WOFF2/WOFF-Dateien bereitstellt und das passende CSS generiert.

Website aufrufen, Schriftart suchen (z.B. “Inter”)
Gewünschte Schnitte auswählen (z.B. 400, 500, 600, 700)
Zeichensätze wählen (latin genügt für deutsche Websites, latin-ext für Sonderzeichen)
CSS kopieren, Font-Dateien herunterladen
Dateien ins Projekt einbinden

Methode 2: fontsource (npm)

Für Projekte mit Build-Pipeline (React, Vue, Astro, Next.js) ist fontsource die eleganteste Lösung:

# Installation
npm install @fontsource/inter

# Oder nur einzelne Schnitte
npm install @fontsource/inter/400.css
npm install @fontsource/inter/600.css
npm install @fontsource/inter/700.css

// In deiner Haupt-CSS/JS-Datei importieren
import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';

fontsource bringt die Font-Dateien im optimalen WOFF2-Format mit und generiert die @font-face-Deklarationen automatisch. Die Dateien landen im Build-Output und werden von deinem eigenen Server ausgeliefert.

Methode 3: Manueller Download

# 1. Font von Google Fonts als TTF herunterladen
# 2. In WOFF2 konvertieren (online oder per CLI)
pip install fonttools brotli
python -c "
from fontTools.ttLib import TTFont
font = TTFont('Inter-Regular.ttf')
font.flavor = 'woff2'
font.save('Inter-Regular.woff2')
"

/* 3. @font-face deklarieren */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Font-Subsetting: Nur das laden, was du brauchst

Eine typische Schriftart enthält tausende Glyphen — Kyrillisch, Griechisch, Vietnamesisch, Arabisch. Für eine deutschsprachige Website brauchst du nur einen Bruchteil davon. Font-Subsetting entfernt nicht benötigte Glyphen und reduziert die Dateigröße drastisch.

Größenvergleich: Mit und ohne Subsetting

Schriftart	Vollständig (WOFF2)	Latin-Subset (WOFF2)	Einsparung
Inter Regular	98 KB	18 KB	82%
Roboto Regular	65 KB	15 KB	77%
Open Sans Regular	59 KB	14 KB	76%
Noto Sans Regular	312 KB	22 KB	93%
Source Sans 3 Regular	78 KB	17 KB	78%

Subsetting mit pyftsubset

# Installation
pip install fonttools brotli

# Subset erstellen: nur Latin + deutsche Sonderzeichen
pyftsubset Inter-Regular.ttf \
  --output-file=Inter-Regular-subset.woff2 \
  --flavor=woff2 \
  --layout-features='kern,liga,clig,calt,ccmp,locl,mark,mkmk' \
  --unicodes='U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD'

# Noch minimaler: nur ASCII + deutsche Umlaute + Euro-Zeichen
pyftsubset Inter-Regular.ttf \
  --output-file=Inter-Regular-de.woff2 \
  --flavor=woff2 \
  --layout-features='kern,liga' \
  --text-file=glyphs-de.txt

Die Datei glyphs-de.txt enthält alle Zeichen, die tatsächlich auf deiner Website vorkommen. Du kannst sie generieren, indem du den gesamten Text deiner Website extrahierst und die einzigartigen Zeichen sammelst.

WOFF2 vs. WOFF vs. TTF: Formatvergleich

Format	Kompression	Browser-Support	Empfehlung
WOFF2	Brotli (30-50% kleiner als WOFF)	Alle modernen Browser (ab 2015)	Primäres Format
WOFF	zlib	Alle Browser inkl. IE11	Fallback (nur wenn IE11 nötig)
TTF/OTF	Keine	Alle Browser	Nur als Quellformat, nicht ausliefern
EOT	Leicht	Nur IE6-IE8	Nicht mehr relevant
SVG Font	Keine	Nur alte iOS Safari	Nicht mehr relevant

Empfehlung: Liefere ausschließlich WOFF2 aus. Der Browser-Support liegt bei über 97% weltweit. Wenn du IE11 unterstützen musst, füge WOFF als Fallback hinzu:

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2'),
       url('/fonts/Inter-Regular.woff') format('woff');
}

font-display Strategien

Die CSS-Eigenschaft font-display steuert, wie der Browser mit dem Laden der Schriftart umgeht:

Wert	Verhalten	FOIT	FOUT	Empfehlung
`swap`	Fallback sofort, tauscht bei Laden	Nein	Ja (kurz)	Body-Text, Lese-Inhalte
`optional`	Fallback sofort, tauscht nur bei sehr schnellem Laden	Nein	Minimal	Performance-kritische Seiten
`fallback`	100ms unsichtbar, dann Fallback, tauscht bei Laden	100ms	Ja	Kompromiss
`block`	3s unsichtbar, dann Fallback	Bis zu 3s	Ja	Icon-Fonts (nicht für Text)
`auto`	Browser-Standard (meist block)	Ja	Ja	Nicht empfohlen

FOIT = Flash of Invisible Text (Text ist unsichtbar, bis Font geladen). FOUT = Flash of Unstyled Text (Fallback-Font wird kurz angezeigt, dann getauscht).

/* Body-Text: swap fuer sofortige Lesbarkeit */
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
}

/* Headline-Font: optional fuer minimalen Layout-Shift */
@font-face {
  font-family: 'Playfair Display';
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/PlayfairDisplay-Bold.woff2') format('woff2');
}

System Font Stack: Die Zero-Request-Alternative

Wenn du keine spezifische Marken-Schriftart brauchst, ist der System Font Stack die datenschutzfreundlichste und performanteste Lösung — keine externen Anfragen, keine Font-Dateien, kein FOUT:

body {
  font-family:
    -apple-system,        /* macOS/iOS Safari */
    BlinkMacSystemFont,   /* macOS Chrome */
    'Segoe UI',           /* Windows */
    'Roboto',             /* Android */
    'Helvetica Neue',     /* aelteres macOS */
    'Arial',              /* Fallback */
    'Noto Sans',          /* Linux */
    sans-serif;
}

/* Monospace fuer Code-Bloecke */
code, pre {
  font-family:
    'SF Mono',           /* macOS */
    'Cascadia Code',     /* Windows 11 */
    'Consolas',          /* Windows */
    'Liberation Mono',   /* Linux */
    monospace;
}

Vorteil: 0 KB Download, 0 externe Requests, 0 DSGVO-Risiko. Die System-Fonts sind auf den jeweiligen Betriebssystemen optimiert und bieten eine hervorragende Lesbarkeit.

Preloading für kritische Fonts

Wenn du Self-Hosting nutzt, kannst du kritische Fonts per <link rel="preload"> priorisieren. Das verbessert den LCP (Largest Contentful Paint) und reduziert FOUT:

<head>
  <!-- Kritische Fonts vorladen -->
  <link
    rel="preload"
    href="/fonts/Inter-Regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />
  <link
    rel="preload"
    href="/fonts/Inter-Bold.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />
</head>

Wichtig: Nur die 1-2 wichtigsten Font-Dateien preloaden (die für den sichtbaren Bereich). Zu viele Preloads blockieren andere kritische Ressourcen und verschlechtern die Performance.

Das crossorigin-Attribut ist Pflicht — auch bei Self-Hosting. Ohne dieses Attribut wird der Font doppelt geladen (einmal durch den Preload, einmal durch die CSS-Referenz).

Variable Fonts: Ein File statt sechs

Variable Fonts enthalten alle Schriftschnitte (Gewichte, Breiten, Neigungen) in einer einzigen Datei. Statt sechs einzelne WOFF2-Dateien für Regular, Medium, SemiBold, Bold, Light und Italic zu laden, genügt eine Datei.

Größenvergleich

Ansatz	Dateien	Gesamtgröße (WOFF2)	HTTP-Requests
Statische Fonts (400, 500, 600, 700)	4	72 KB	4
Variable Font (100-900)	1	48 KB	1
Einsparung	-3	-33%	-75%

/* Variable Font einbinden */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900; /* Gesamter Gewichtsbereich */
  font-display: swap;
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
}

/* Nutzung: Jedes beliebige Gewicht */
h1 { font-weight: 750; } /* Zwischen Bold und ExtraBold */
h2 { font-weight: 650; }
p  { font-weight: 400; }

Font Awesome lokal einbinden

Font Awesome wird häufig über das CDN cdnjs.cloudflare.com oder use.fontawesome.com geladen. Beide übertragen die IP-Adresse des Besuchers. Die lokale Einbindung:

# Option 1: npm
npm install @fortawesome/fontawesome-free

# Option 2: Manuell herunterladen von fontawesome.com
# Die relevanten Dateien kopieren:
# - /webfonts/fa-solid-900.woff2
# - /webfonts/fa-regular-400.woff2
# - /webfonts/fa-brands-400.woff2
# - /css/all.min.css (Pfade in der CSS-Datei anpassen!)

<!-- Vorher (extern): -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<!-- Nachher (lokal): -->
<link rel="stylesheet" href="/css/fontawesome/all.min.css">

Tipp: Wenn du nur wenige Icons verwendest, ersetze Font Awesome durch Inline-SVGs. Ein einzelnes SVG-Icon ist 200-500 Bytes gross; die gesamte Font-Awesome-Bibliothek über 100 KB. Bibliotheken wie Lucide oder Heroicons bieten Tree-Shaking, sodass nur genutzte Icons im Bundle landen.

Praxis-Checkliste: Webfonts DSGVO-konform

Externe Fonts automatisch erkennen

Nicht immer ist offensichtlich, welche Fonts deine Website extern lädt. Theme-Updates, Plugins, Page-Builder und eingebettete Widgets können jederzeit neue externe Font-Anfragen einführen — oft ohne dein Wissen.

Der Compliso Scanner prüft deine Website automatisch auf Anfragen an externe Font-Server und erkennt dabei nicht nur Google Fonts, sondern auch Adobe Fonts, Font Awesome CDN, Bootstrap Icons und andere externe Schriftquellen. Bei regelmäßigen Scans wirst du sofort informiert, wenn eine neue externe Font-Anfrage auftaucht.

Scanne deine Website jetzt kostenlos und finde in Sekunden heraus, ob noch externe Fonts auf deiner Seite geladen werden. Mit dem Compliso Rechtstexte-Generator aktualisierst du anschließend deine Datenschutzerklärung entsprechend.