Google Fonts Download: Den Google Font lokal laden

Google Schriften zu verwenden ist sehr beliebt. Doch ein Google Font verursacht erhebliche DSGVO Probleme, da Daten in die USA übertragen werden. Etliche Website-Besitzer sind bereits abgemahnt worden. WordPress.org fordert Theme-Autoren nachdrücklich auf, zu lokal gehosteten Webfonts zu wechseln. In diesem Beitrag lernst Du, wie Du die Datenschutzprobleme mit einem Google Fonts Download beheben kannst und den Font lokal einbindest.

Das Landgericht München entschied am 20.01.2022:

Der Einsatz von Schriftartendiensten wie Google Fonts kann nicht auf Art. 6 Abs. 1 S.1 lit. f DSGVO gestützt werden, da der Einsatz der Schriftarten auch möglich ist, ohne dass eine Verbindung von Besuchern zu Google Servern hergestellt werden muss.
– LG München: 3 O 17493/20 vom 20.01.2022

Hier besteht für jeden Website-Administrator Handlungsbedarf, denn auf Basis dieses Urteils wird es noch weitere Abmahnungen in Zukunft geben. In diesem Beitrag zeigen wir Dir, wie Du Deine Google Fonts DSGVO sicher auf Deinem eigenen Server / Deinem Webhostingpaket hosten kannst. Damit tust Du Dir auch für Deine Suchmaschinenoptimierung einen Gefallen, denn selbstgehostete Schriften laden schneller.

Google Fonts Download: Lade Deinen Google Font herunter

Für den Download Deines Google Font gibt es zwei Möglichkeiten. Die erste ist die Möglichkeit, die Dir die offizielle Google Font Website bietet. Zuerst suchst Du Dir die Google Schriftart aus, die Dir gefällt. Danach klickst Du auf den Google Font und klickst oben rechts auf den Download-Button.

Hier bekommst Du allerdings nur .TTF Dateien, die lediglich für die Nutzung auf Deinem Computer gedacht sind. Zum Beispiel in Foto-Bearbeitungs-Software.

Die Webfont-Varianten herunterladen

Google Fonts Download woff Dateien

Wenn Du die Webfont-Variante (.WOFF und .WOFF2 Dateien) downloaden möchtest, ist es etwas umständlicher. Hier musst Du die einzelnen Schriftvarianten anklicken, die Du herunterladen möchtest.

1 – Die Schriftstärken auswählen

2 – Die gewählten Google Font Varianten downloaden

Der Nachteil eines Downloads über die Google Fonts Website

Allerdings hat der Download über die Google Webfonts Website auch einen gravierenden Nachteil. Du bekommst bekommst Die benötigten Dateien, jedoch keine Anleitung, wie man sie DSGVO konform einsetzen kann. Denn wenn Du die Links dieses Tools verwendest, kannst Du teuer angemahnt werden. Deshalb schaue Dir die bessere Methode weiter unten an.

Webfonts leichter downloaden mit dem Webfont-Helper

Webfonts DSGVO sicher in WordPress einbauen: Zwei Methoden

Zuerst zeige ich Dir die fortgeschrittene Methode, bei der Du selbst Hand anlegst und mit Code arbeitest. Wenn Dir die Begriffe functions.php und Child-Theme nicht fremd sind, empfehle ich Dir die erste Methode. So hast du selbst die volle Kontrolle über den Code und die Dateien. Zudem sparst Du Dir ein weiteres Plugin.

Methode zwei wird mittels eines Plugins realisiert . Diese Methode ist richtig für User, die sich nicht mit Code auskennen.

Wie binde ich Google Fonts lokal ein?

Hier kommt die leicht verständliche Anleitung, nach der Du Schritt für Schritt vorgehen kannst.

Genutzte Google Fonts identifizieren und am Laden hindern

Wenn Du in Deinem Theme Google Fonts verwendet hast, musst Du sie zuerst am Laden hindern, bevor Du sie lokal einbinden kannst. Ansonsten würden sie doppelt geladen werden und das DSGVO-Problem besteht weiterhin.

Zuerst ausprobieren: In vielen Fällen hilft bereits dieses Code-Snippet

Auch dieses Snippet kommt in die functions.php Deines Child-Themes.

/**
* Remove Google Fonts
*/  

add_filter( 'style_loader_src', function($href){
    if(strpos($href, "//fonts.googleapis.com/") === false) {
        return $href;
    }
    return false;
});

Schaue Dir danach den Quellcode Deiner Website an, ob es keine Links mehr zu fonts.googleapis.com gibt. Wenn ja, ist alles gut. Wenn nicht, fahre hier fort und suche nach der ID der Fonts.

Im Screenshot ist der Link zu den Google Fonts Servern zu sehen. Jetzt benötigst Du die ID des Font-Links. Hier lautet die ID wp-tavern-fonts. Das CSS am Ende der ID muss ignoriert werden.

Damit Dein Theme diese Schriftarten vom Google-Server nicht mehr lädt, braucht es eine kleine PHP-Funktion, die in die functions.php Deines Child-Themes kommt. In diese Funktion musst Du nur noch 2 x die ID Deines Google Font Links eintragen. Hier findest Du eine Anleitung zum Erstellen eines Child-Themes.

 if ( ! function_exists( 'ah_dequeue_css_from_plugins' ) ) :   
/**
 * Wir hindern die Google Fonts Datei des Themes am Laden
 * Wir loeschen die Registrierung und den Ladevorgang
 */
function ah_dequeue_css_from_plugins()  {
    
    wp_deregister_style( "wp-tavern-fonts" );  // Hier die korrekte ID eintragen
    wp_dequeue_style( "wp-tavern-fonts" );  // Hier die korrekte ID eintragen

}
add_action('wp_print_styles', 'ah_dequeue_css_from_plugins', 100);    
endif;

Google Fonts Download: Binde die Webfonts lokal ein mit dem Google Webfonts Helper

Google Fonts DSGVO sicher zu machen bedeutet die beliebten Schriftarten vom eigenen Webhosting / Server ausliefern zu lassen. Aber keine Angst, Google Fonts lokal einbinden ist wirklich nicht schwierig.

Warum solltest Du einen Google Font verwenden?

Die Schriftarten von Google sehen einfach besser aus, als die websicheren Schriften, die zur Anzeige auf einer Website ohne Google Fonts möglich wären. Natürlich kannst Du zum Beispiel Arial oder Helvetica verwenden und vollkommen auf andere Schriftarten verzichten. Aber den meisten Website-Besitzern gefällt einfach eine etwas schönere Schriftart. Die Auswahl ist groß und jeder findet seine spezielle Schriftart.

Wie funktioniert der Google Fonts Download?

Das ist mit dem Google Webfonts Helper eine unkomplizierte Sache. Am Anfang stehen Deine gewünschten Schriftarten. Die kannst du Dir mit einer kleinen Vorschau aussuchen. Auf der linken Seite findest Du die Google Schriften und auf der rechten Seite gibt es die Vorschau mitsamt Download-Möglichkeit. Diese Website ist für mich fast unverzichtbar, um Google Fonts DSGVO sicher laden zu lassen.

Sollte es noch Variationen der Google Fonts geben, so werden diese unter »Select Styles« aufgeführt. In diesem Fall gibt es vom Font »Advent Pro« gleich 7 Varianten. Wenn Du die Schriftgröße der Vorschau änderst, kannst Du einen besseren Eindruck von der Schriftart bekommen. Wenn Du Deinen Favoriten gefunden hast, klicke alle Varianten an, die Deine Website benötigen könnte.

Beispiel:

• Regular ist bei den meisten Fonts die ideale Variante für den Fließtext
• 600 oder 700 ist ideal für die Überschriften

Danach klicke auf »Modern Browsers« und auf »Download Files«. Erstelle in Deinem Child-Theme Ordner einen Ordner namens »fonts«, entpacke die heruntergeladene Google Font Datei und kopiere die Dateien in Deinen Font-Ordner. Diesen Ordner lädst Du per FTP-Zugang in Deinen Theme-Ordner auf dem Webhosting.

Die heruntergeladenen Google Fonts DSGVO sicher verwenden

Hier gibt es zwei verschiedene Lösungen.

Lösung 1:

Lade die Fonts über Deine style.css Datei. Lade Dir per FTP Deine Style.css Datei auf Deinen Desktop, öffne Sie und kopiere das nötige CSS hinein.

/* advent-pro-regular - latin */
@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/advent-pro-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/advent-pro-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* advent-pro-600 - latin */
@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/fonts/advent-pro-v18-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/advent-pro-v18-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* advent-pro-700 - latin */
@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/fonts/advent-pro-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/advent-pro-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Die Punkte vor dem /fonts/ müssen weg. Ansonsten werden die Font-Dateien nicht geladen. Wenn Du jetzt die style.css wieder in Deinen Theme-Ordner auf dem Server hochlädst, wird Deine neue Google Schrift geladen und angezeigt. Du musst eventuell Deinen Browser-Cache löschen.

Lösung 2:

Laden der Font-Dateien über die functions.php Deines Themes. Hier empfehle ich Dir, den vollständigen Pfad zu dem Google Fonts Download im Font-Ordner zu verwenden.

<?php 
// Ab hier kopieren
if ( ! function_exists( 'ah_add_custom_fonts_to_header' ) ) : 
/**
 * Wir laden die Google Fonts an oberster Stelle in den Quellcode der Website
 */
function ah_add_custom_fonts_to_header() {
?>
<style>
/* advent-pro-regular - latin */
@font-face {
  font-family: 'Advent Pro';
  font-style: normal;    
  font-weight: 400;
  src: local(''),
       url('https://deinewebsite.de/wp-content/themes/deintheme/fonts/advent-pro-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://deinewebsite.de/wp-content/themes/deintheme/fonts/advent-pro-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* advent-pro-600 - latin */
@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('https://deinewebsite.de/wp-content/themes/deintheme/fonts/advent-pro-v18-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://deinewebsite.de/wp-content/themes/deintheme/fonts/advent-pro-v18-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* advent-pro-700 - latin */
@font-face {
  font-family: 'Advent Pro';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('https://deinewebsite.de/wp-content/themes/deintheme/fonts/advent-pro-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://deinewebsite.de/wp-content/themes/deintheme/fonts/advent-pro-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
</style>    
<?php }
add_action( 'wp_head', 'ah_add_custom_fonts_to_header', 1 ); // Prioritaet 1, ganz oben im Quellcode
endif;

Auf diese Art werden die Schriftarten ganz oben in den Quellcode geladen und somit auch als erstes ausgeführt und angezeigt. Ich persönlich würde Lösung Nummer zwei bevorzugen. In beiden Fällen hast Du die Google Fonts DSGVO sicher geladen und kannst nicht mehr abgemahnt werden.

Google Fonts DSGVO sicher laden mit Plugins

1 - Local Google Fonts

Dieses Plugin prüft, ob die Schriftarten über wp_enqueue_style eingebettet sind. User, die Google-Schriftarten über @import einbetten, müssen dies ändern, bevor sie das Plugin verwenden. Es lädt derzeit automatisch neue Schriftversionen herunter, wenn diese verfügbar sind.

Birsak hat es als eine Art "set-it-and-forget it"-Plugin entwickelt. Dies könnte eine gute Option für technisch nicht versierte Benutzer sein, die ein Theme haben, das noch nicht vom Autor aktualisiert wurde. Local Google Fonts ist kostenlos auf WordPress.org erhältlich.

Die Einstellungen des Local Google Fonts Plugin

2 - OMGF | GDPR Compliant, Faster Google Fonts. Easy

Das OMGF Plugin wurde im Hinblick auf Leistung und Benutzerfreundlichkeit entwickelt. Es verwendet die Google Fonts Helper API, um die von Deinem Theme und den Plugins verwendeten Schriftarten automatisch zwischenzuspeichern. Das reduziert DNS-Anfragen und beschleunigt Deine WordPress-Website.

Nach der Installation des Plugins beginnt OMGF automatisch mit der Suche nach Google Fonts, sobald eine Seite auf Deiner Website aufgerufen wird.

Alle Google Fonts werden im Abschnitt »Optimierte Schriftarten verwalten« des OMGF-Einstellungsbildschirms aufgelistet. Dort kannst Du folgendes wählen:

• Schriftarten vorladen (Preload), damit sie schneller angezeigt werden
• Fonts, die nicht in Verwendung sind am Laden hindern
• Die kumulative Layout-Verschiebung reduzieren (Core Web vitals)
• Den Google Font durch Systemschriftarten ersetzen (Pro-Version)

Die Pro-Version des Plugins für 19€ / Jahr bringt noch einige weitere Funktionen mit:

• Multisite-Unterstützung
• Findet Google Fonts auch in @font-face und @import Anweisungen innerhalb von inline <style> Blöcken
• Findet Fonts in @font-face und @import Anweisungen in lokalen Stylesheets
• Und einiges mehr.

Lösche Google reCAPTCHA besser sofort!

Ja, Google reCAPTCHA lädt ebenfalls einen Font vom Google-Server. Und das kann man leider nicht verhindern. Daher solltest Du den Google Dienst sofort von Deiner Website löschen. Es gibt eine bessere Lösung:

Friendly Captcha for WordPress

Friendly Captcha ist eine datenschutzfreundliche Anti-Bot-Lösung, die WordPress-Webseiten-Formulare vor Spam und Missbrauch schützt.

Fazit:

Den Webfont als Google Fonts Download DSGVO sicher in die eigene Website einzubinden ist keine große Kunst und mittels weniger Zeilen Code oder mit einem praktischen Plugin schnell erledigt.

Quellen:

• WordPress.org Strongly Urges Theme Authors to Switch to Locally Hosted Webfonts
• German Court Fines Website Owner for Violating the GDPR by Using Google-Hosted Fonts