Google Fonts Download ᐅ Google Font lokal einbinden

Keine Kommentare
Wie Du Google Fonts DSGVO sicher in Deine Website einbaust

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.

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.

So einfach kannst Du Deinen Google Font herunterladen.

So einfach kannst Du Deinen Google Font herunterladen. Allerdings nur für die Desktop-Nutzung.

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

Google Fonts Download: Wähle zuerst die Font-Varianten aus, die Du herunterladen möchtest.

Wähle zuerst die Font-Varianten aus, die Du herunterladen möchtest. Danach die Sidebar öffnen.

2 – Die gewählten Google Font Varianten downloaden

Hier kannst Du Deinen Google Font mit den ausgewählten Schriftvariationen downloaden.

Hier kannst Du Deinen Google Font mit den ausgewählten Schriftvariationen 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.

Download 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.

Google Fonts DSGVO sicher machen: Suche die ID des verlinkten Fonts

Google Fonts DSGVO sicher machen: Suche die ID des verlinkten 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.

Der Google Webfonts Helper mit Vorschau und Schriftarten

Der Google Webfonts Helper mit Vorschau und Schriftarten

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
Google Webfonts Helper: Font herunterladen und das nötige CSS kopieren.

Google Webfonts Helper: Font herunterladen und das nötige CSS kopieren.

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.

Achtung, Du musst den Pfad anpassen wie im folgenden CSS-Beispiel:
/* 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

Mit dem Local Google Fonts Plugin verwendest Du die Google Fonts DSGVO sicher.

Mit dem Local Google Fonts Plugin verwendest Du die Google Fonts DSGVO sicher.

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

Die Einstellungen des Local Google Fonts Plugins.

Die Einstellungen des Local Google Fonts Plugins. Einfach zu bedienen.

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

OMGF | GDPR Compliant, Faster Google Fonts. Easy | WordPress Plugin

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.

Achtung: Wichtig!

Du benutzt Google reCAPTCHA, um Dein Kontaktformular vor Spam zu schützen? Dann lädt Deine Website immer noch Google Fonts und Du kannst weiterhin für teueres Geld abgemahnt werden.

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.

Die einzige Möglichkeit, wirklich DSGVO-sicher seine Kontaktformulare vor Spam zu schützen, ist der alternative Einsatz von hCaptcha. Auch dieser Dienst ist kostenlos und funktioniert fast besser als die Google-Variante.

hCaptcha Website besuchen 

Das hCaptcha WordPress Plugin

Das hCaptcha WordPress Plugin ersetzt den Google Dienst reCAPTCHA DSGVO-sicher.

Das hCaptcha WordPress Plugin ersetzt den Google Dienst reCAPTCHA DSGVO-sicher.

Download hCaptcha von WordPress.org

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:

Der Artikel war hilfreich? Dann teile ihn bitte…

Kategorie: WordPress
Andreas Hecht

Andreas Hecht

Andreas ist der Gründer und CEO der SEO Agentur Hamburg und Experte für Suchmaschinenoptimierung und WordPress Entwicklung.

Keine Information mehr verpassen

Für den Newsletter anmelden, um jeden Monat tolle Inhalte und wichtige Infos zu bekommen.

Wir senden keinen Spam! Erfahre mehr in unserer Datenschutzerklärung.

Du bist auf der Suche nach einer seriösen SEO Agentur?

Dir hat unser Artikel gefallen und Du möchtest unsere Hilfe in Anspruch nehmen? Dann melde dich bei unverbindlich bei uns. Wir freuen uns auf Deine Anfrage!

Jetzt weitere interessante Beiträge lesen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.