Google Schriften DSGVO-konform in WordPress mit einem Plugin einbinden

Google Fonts DSGVO-konform lokal einbinden
Schritt 1: Google Schriften herunterladen
Schritt 2: Goolge Schriften in WordPress hochladen
Schritt 3: Google Schrift in Divi einbinden
Schritt 4: Google Schriften in Divi deaktivieren
Schritt 5: Prüfe, ob deine Schriften korrekt eingebunden sind
Tipps zum Schluss

Die Abmahnwelle von nicht eingebetteten Google Schriften ist noch nicht lange her. Ob diese nun gerechtfertigt war, sei mal dahingestellt. Jedenfalls ist es erforderlich, dass deine Schriften DSGVO-konform eingebunden sind.
Wenn du eine Website hast, kannst du das übrigens hier checken:
https://www.e-recht24.de/google-fonts-scanner

Google Fonts DSGVO-konform lokal einbinden

In der Vergangenheit fand ich es nicht immer einfach, die Schriften entsprechen einzubetten. Hier musste ich im Code rumwursteln, die Schriften einfügen, dann den Code wieder entfernen. Bei jedem Hosting-Anbieter kommt man anders an die entsprechende Stelle heran. Das hat mich Zeit und Nerven gekostet. Vor allem, wenn ich neue Schriften ergänzen wollte, war das aufwändig. Divi erlaubt beispielsweise aus Sicherheitsgründen auch nicht einfach den Upload von Schriften. Das hieß für mich früher: Code ändern, Schriften hochladen, Codeschnipsel wieder entfernen. Nervig.

Ich mag es, wenn es möglichst einfach geht und ich Zeit sparen kann. Denn diese ist mir lieb und teuer. Ich vermute mal, du kannst auch was Besseres mit deiner Zeit anfangen, als dich mit diesen Dingen auseinanderzusetzen.

Daher zeige ich dir in diesem Artikel eine einfache Anleitung, wie du deine Schriften via Plugin einfach und schnell und vor allem DSGVO-konform installieren kannst.

Schritt 1: Google Schriften herunterladen

Ich verwende vor allem Google Fonts. Natürlich gibt es auch noch andere Quellen, wo du schöne Schriften herbekommst. Diese sind aber nicht alle kostenlos und du musst überprüfen, ob du auch die richtige Lizenz dafür hast, um diese auf deiner Website einbinden zu können.
Bei Google Fonts hast du eine große Auswahl wunderschöner, kostenloser Schriften.
Such dir hier deine Wunschschriftarten aus.

Tipp: ich würde nicht mehr als 2 Schriften für deine Website verwenden.

Dann klickst du auf die Schrift, die du installieren willst. Ich verwende ich ‘Playfair Display’. Du klickst rechts auf den blauen Button “Get font” und anschließend auf “Download all”. Auf diese Weise lädst du die gesamte Schriftfamilie herunter.

Den Zip- Ordner kannst du dir dann erstmal lokal auf deinen Desktop

Du erhältst dann in der Regel folgende Dateien:

• OFL (OPEN FONT LICENSE )
• Schriftarten für alle Schriftschnitte kursiv
• Schriftarten für alle Schriftschnitte
• Readme
• Ordner Static (hier liegen die einzelnen Schriftschnitte)

Schritt 2: Google Schriften in WordPress hochladen

Das ist jetzt der spannende, eigentliche Zeitsparteil. Wie erwähnt, erlaubt Divi aus Sicherheitsgründen nicht einfach so einen Schriftenuplaod. Vielleicht hast du das auch schon festgestellt.

Hier kommt dann das Plugin ins Spiel.

So gehst du vor:

1. Logge dich auf deiner Website ein und gehe zu Plugins.
2. Klicke auf “neues Plugin hinzufügen” und gib dann “Enhanced media library” ein.

Wie du siehst, haben es schon einige Personen heruntergeladen. Das ist immer ein gutes Zeichen.

3. Klicke auf “jetzt installieren” und dann auf “Aktivieren”
4. Anschließend gehst du in den Bereich “Media Settings” in bei diesem Plugin und klickst auf den Reiter “MIME Types”. Alternativ kannst du in der dies auch links in der Leiste im Backend finden.

5. Dann klickst du oben auf den Button “Add new MIME Type”

6. Hier tippst du dann das Folgende ein, bzw. nimmst diese Einstellungen vor:

Bei Extension: ttf
Bei MINE Type: application/ttf
Bei Singular Label: application/ttf
Bei Plural Label: application/ttf
Du hakst “Allow Upload” an

Wichtig:  “Änderungen speichern” mit dem blauen Button!

Schritt 3: Google Schriften in Divi einbinden

Öffne eine beliebige Seite. Text muss natürlich vorhanden sein.
Klicke auf den Text in dem Textmodul.
Dann navigierst du zu dem Punkt Design, wo du die Schriften einstellst und klickst auf “Hochladen”

Es öffnet sich ein neues Fenster, in dem du einen Namen für deine Schrift eingeben kannst. Am besten verwendest du den tatsächlichen Namen der Schrift. 

Anschließend wählst du die .ttf-Datei aus und stellst sicher, dass alle Schriftstärken unterstützt werden.
Du kannst auch die einzelnen Schriftschnitte auswählen, aber die oben genannte Variante macht mehr Sinn.

Schritt 4: Google Schriften in Divi deaktivieren

Dafür gehst du in das Backend von WordPress und dann auf Divi links in der Navigation und wählst “Theme-Optionen” aus.
Die deaktivierst “Verwenden von google fonts” und “Untergruppen von google fonts”

Speichern nicht vergessen mit dem grünen Button!

Schritt 5: Prüfe, ob deine Schriften korrekt eingebunden sind

Sehr gut, du hast es fast geschafft. Wenn alles richtig gelaufen ist, solltest du deine Website noch mal hier prüfen. Hierfür gibt eine URL auf dieser Seite ein:
https://www.e-recht24.de/google-fonts-scanner

Tipps zum Schluss

Du siehst, es kann auch einfach sein. Zum Schluss noch ein Hinweis zum Thema Rechtssicherheit. (Ich bin natürlich kein Anwalt.) Ich habe häufig das Problem bei Kundenwebsites, dass hier nicht alles rund läuft, was den grünen Haken betrifft und das liegt nicht direkt immer an den Schriftarten. Aber durchaus indirekt: nämlich, wenn die Google-Map als Wegbeschreibung eingebunden wird. Das kann häufig zu einem Problem führen. Hier musst du schauen, ob du nicht auch eine andere Lösung findest.

Übrigens: Wenn du eine Schriftart siehst, die dir besonders gefällt, dann kannst du einfach rausfinden, wie diese heißt.
Gehe hierzu auf das Tool “Font Squirrel”. Hier kannst du einen Screenshot der Schriftart hochladen und bekommst Namen und Quelle genannt. Alternativ nutze ich auch gerne My Fonts. Hier kannst du außerdem schöne Schriftarten kaufen.

0€ Website Checkliste für deine Planung

Aus Gründen der besseren Lesbarkeit verzichte ich auf das Gendern. Natürlich sind alle Geschlechter gleichermaßen angesprochen.