Google Fonts

Viele Word­Press-Themes setzten standardmäßig Schriftarten ein, die Google im Rahmen einer umfangreichen Bibliothek („Google Fonts“ oder „Google Webfonts“) kostenfrei zum Einbinden in Webseiten zur Verfügung stellt. Einerseits ist das ein löbliches Angebot. Denn damit bekommt die Gestaltung der Website ohne weiteres Zutun auf den verschiedensten Geräten ein einheitliches, schickes Aussehen. Andererseits kann diese Technik rechtliche Probleme mit sich bringen.

Denn beim Laden der Schriftarten aus der Google-Fontbibliothek werden die IP-Adressen sowie Systemdaten der Seitenbesucher an den US-amerikanischen Diensteanbieter weitergegeben. Ohne dass die Besucher dazu ihr Einverständnis abgegeben hätten. Damit verstößt der Webseitenanbieter gegen die Regelungen der europäischen Datenschutzgrundverordnung. Anfang 2022 hat deshalb das Landgericht München I einem Kläger in einer Einzelfallentscheidung ein Schmerzensgeld von 100 Euro zuerkannt. In der Folge kam es in Deutschland zu Massenabmahnungen gegen Betreiber von Internetseiten, auf denen Schriftarten von externen Google-Bibliotheken eingebunden waren.

Auf verschiedenen Internetseiten konnte man damals prüfen, ob die eigene Webseite ein Google-Font-Problem hatte, z. B. auf https://www.e-recht24.de/google-fonts-scanner.

Wie kann man das Einbinden von Google Fonts verhindern?

Es gibt verschiedene Möglichkeiten, das Problem zu umschiffen: Man könnte auf die Schriftarten aus den Google-Bibliotheken verzichten. Doch wenn man ganz auf Angaben zur Schriftgestaltung verzichtet – dies könnte man in der Word­Press-Datei style.css angeben –, dann zeigt jeder Browser eben das an, was als Standardschrift eingestellt wurde. Das kann dann für einige Besucher ziemlich hässlich aussehen.

Theoretisch könnte man das externe Einbinden von Google Fonts ja verzögern: Erst wenn der Besucher – zum Beispiel im Rahmen eines Cookie-Banners – sein Einverständnis zur Google-Schrift­biblio­thek gegeben hat, werden die Schriftarten nachgeladen. Aber was soll geschehen, wenn die Einwilligung nicht erteilt wird? Wird dann der Besucher tatsächlich mit der „hässlichen“ Seite konfrontiert? Dies halte ich nicht für einen empfehlenswerten Weg.

Allerdings dürfen Google Fonts alternativ zum Laden aus den Bibliotheken des Anbieters auch lokal auf dem Webserver eines jeden Seitenabieters gespeichert und von dort aufgerufen werden. Dann werden auch keine Besucherdaten an Google weitergegeben.

Wie kann man Schriftarten lokal einbinden? Dafür gibt es zwei Möglichkeiten:

1. Automatisch mit Plugins

Das geht schnell und einfach. Ich setze dafür gerne das WordPress-Plugin OMGF von Daan van den Bergh ein: Installieren, aktivieren, einmal die Einstellungen aufrufen, die benötigten Schriftarten heraussuchen lassen und auf Speichern & Optimieren klicken. (Alle Optionen auf der Einstellungsseite können ignoriert werden, wenn man nicht weiß, was man damit tun könnte.)

Das war es auch schon. Das Plugin speichert alle Schriftarten auf dem eigenen Server und kappt die Verbindung zu den Google-Bibliotheken. Vorsicht geboten ist nur dann, wenn man auf den eigenen Internetseiten auch Inhalte von fremden Servern einbindet; siehe dazu auch den Hinweis ganz unten in diesem Text¹.

2. Schriftarten selbst auf dem Webserver installieren

Das, was OMGF oder ähnliche Plugins automatisch machen, könnte man auch selbst manuell erledigen. Warum man sich das antun sollte? Nun, man könnte auf diese Weise auch beliebige andere Schriftarten aussuchen, in die eigenen Webseiten lokal einbinden und damit vom vorgefertigten Layout des ausgewählten Word­Press-Themes abweichen. Wenn man weiß, was man tut.

Allzu kompliziert ist das Selbermachen nicht. Allerdings sind mehrere Schritte nötig, um selbst gewählte Schriftarten auf den eigenen Server zu bringen:

Erstens sorgt man dafür, dass standardmäßig vorhandene Verbindungen zu Googles Fontbibliotheken gekappt sind. Das geht am einfachsten mit einem schlanken Plugin, zum Beispiel mit Disable and Remove Google Fonts von Fonts Plugin. (Darauf kann man natürlich verzichten, wenn das aktive Theme gar keine Google Fonts einsetzt.)

Im zweiten Schritt besorgt man sich alle Schriftarten, die man einsetzen möchte. Achte dabei unbedingt darauf, dass die Schriftarten nicht urheberrechtlich geschützt sind! Eine bekannte Quelle für weit über tausend verschiedene Schriftarten ist https://gwfh.mranftl.com/fonts, angeboten vom Österreicher Mario Ranftl. Dort habe ich beispielsweise die Schriftart Acme gefunden, die ich hier für meine Seitenüberschriften verwende.

Man wählt eine Schriftart in der endlosen Liste auf dieser Website aus. Bei manchen Schriftarten sind verschiedene Stile verfügbar. Hier kann man nun auswählen, welche dieser Darstellungsstile man benötigt und gegebenenfalls Häkchen setzt. Im Anschluss sind zwei Dinge zu tun:

1. Herunterladen des angebotenen ZIP-Archivs auf den eigenen PC. Entpacken des Archivs und Hochladen aller darin enthaltenen Schriftartdateien in ein (beliebiges) Verzeichnis auf Deinem Webserver mit Hilfe eines FTP-Programms.
   Ich lade die Dateien oft in ein neues Verzeichnis mit dem Namen fonts hoch, das ich zuvor im Hauptverzeichnis angelegt habe. (Dieser Ort entspricht zwar nicht der standardisierten Word­Press-Da­ten­stra­te­gie. Die besagt, dass Schriftartenverzeichnisse unter dem verwendeten Theme abgelegt werden sollten. Da ich aber manche Fonts auch jenseits aller Themezugehörigkeit verwende – zum Beispiel Symbolschriften wie hier beschrieben –, gefällt mir die Ablage im Hauptverzeichnis besser.)
2. Einbinden der Schriftart(en) in die Seitengestaltung des Themes. Dazu öffnet man die Datei style.css des aktiven Themes² mit einem Texteditor und fügt dort den CSS-Code ein, den man zuvor auf der Schriftartenseite kopiert hat:

/* acme-regular - latin */
@font-face {
  font-family: 'Acme';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/acme-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/acme-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/acme-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/acme-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/acme-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/acme-v21-latin-regular.svg#Acme') format('svg'); /* Legacy iOS */
}

Achtung: Die Angaben unter url('../… müssen natürlich angepasst werden, je nachdem, wo Eure Schriftart auf dem Server liegt. Also zum Beispiel: url('https://meinewebsite.de/fonts/…

Im dritten Schritt muss man noch festlegen, wofür diese Schriftart verwendet werden soll. Das geht am einfachsten über den Customizer des aktiven Themes². Im Administratormenü der Word­Press-Installation findet man bei Design den Unterpunkt Customizer. Anklicken, und dann kann man ganz unten in der folgenden Auswahl den Punkt Zusätzliches CSS anwählen.

Nun muss man in der CSS-Syntax eintragen, wofür die Schriftart verwendet werden soll. Also etwa in meinem Beispiel nur für die Überschriften:

/* Schriftarten: */
.entry-title {
	font-family: Acme, sans-serif !important;
}

Möchte man statt der Überschriften zum Beispiel alle Textabsätze in einer bestimmten Schriftart darstellen lassen, ersetzt man den .entry-title durch p, li. Falls alle Textelemente einer Website in der gleichen Schriftart dargestellt werden sollen, ersetzt man den .entry-title durch body.

Hier sind natürlich auch mehrere Schriftarten für unterschiedliche Textelemente möglich. Achte bei der Auswahl von Schriftarten unbedingt darauf, dass es sich um lizenzfreie Schriften handelt oder dass Du eine Lizenz zur Verwendung der Schrift auf Internetseiten besitzt. Sonst bekommst Du Ärger wegen der Urheberrechte.

---

Fußnoten:

¹ — Wer externe Inhalte von Anbietern in die eigene Internetseite einbettet, sogenannten „embedded content“, handelt sich damit womöglich Ärger ein. Beispiele für externe Inhalte sind Videos von YouTube oder Vimeo, Landkarten von Google Maps, oder Roboteridentifikation durch Google ReCaptcha. Solche Dienste können ebenfalls Google Fonts einbinden, so dass Deine Seitenbesucher das gleiche Problem hätten, als ob Du selbst Google Fonts aus den Schriftbibliotheken des Internetriesen einsetzen würdest.
(Abgesehen davon setzten solche Dienste meist Cookies zu Trackingzwecken, was ohne Abschirmung ebenfalls nicht erlaubt ist. Aber das ist ein ganz anderes Thema, das ich auf einer separaten Seite bespreche.)

² — Solche Änderungen und Ergänzungen der Darstellung sollten nicht direkt im ausgewählten Ba­sis-The­me eingefügt werden. Dazu sollte man unbedingt ein sogenanntes Child-Theme verwenden. Was das ist und warum man es einrichten sollte, erkläre ich in einem separaten Beitrag.

---

Schritt für Schritt: Der oben stehende Text ist ein Ratschlag, der an 22.Stelle der logischen Reihenfolge bei der Einrichtung einer Word­Press-In­stal­la­tion steht. Die komplette Reihenfolge zweckmäßiger Aktionen findest Du in meinem Inhaltsverzeichnis. Wenn Du wissen möchtest, welche Schritte direkt vor oder nach diesem Ratschlag sinnvoll sind, findest Du hier Vorgänger- und Nachfolgebeitrag: