Google Fonts Download: Deinen Google Font lokal einbinden

Google Fonts sind wahnsinnig beliebt. Doch sie können auch Probleme verursachen. Performance-Probleme und Datenschutz-Probleme, da beim Laden der Schriftarten Daten in die USA übertragen werden. In diesem Beitrag lernst Du, wie Du die Performance- und Datenschutzprobleme mit einem Google Fonts Download beheben kannst und die coolen Schriftarten lokal einbindest. Und das gleich mit zwei Methoden.

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.

Aber es existiert ein echtes Datenschutzproblem und eine Abmahngefahr, wenn der Font nicht von eigenen Server / Hosting geladen wird.

Das Landgericht München entschied am 20.01.2022:

Deine Wettbewerber werden bei Google besser gefunden als Du?

Mit unserer laufenden SEO Betreuung wirst Du schnell bessere Rankings in Googles Suchergebnissen erreichen und so mehr Kunden gewinnen und mehr Umsatz erzielen.

Kostenlose Erstberatung vereinbaren

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 Fonts laden schneller.

Google Fonts Download von der Google Fonts Website

Für den Download Deines Google Font gibt es zwei Möglichkeiten. Die erste ist die Möglichkeit, die Dir die offizielle Google Fonts Website bietet. Zuerst suchst Du Dir die Google Schriftart aus, die Dir gefällt. Danach könntest Du auf die Idee kommen, den »Download family« Button zu klicken.

Allerdings kannst Du dort nur .TTF Dateien, die lediglich für die Nutzung auf Deinem Computer gedacht sind, herunterladen. Zum Beispiel für die Nutzung in einer Foto-Bearbeitungs-Software.

So kannst Du die wichtigen Webfont-Varianten herunterladen

Google Fonts Download der 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 Die benötigten Dateien, jedoch keine Anleitung, wie Du die Google Fonts lokal einbinden 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

Wie kann man Google Fonts lokal einbinden? Zwei Methoden

Folge dieser einfachen Anleitung und es kann nichts mehr schiefgehen. Du bekommst gleich 2 Methoden gezeigt. Wähle Deine Methode nach Deinem Kenntnisstand aus.

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? Methode 1: Über die functions.php

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

Vom Theme 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. Zudem würde sich die Ladezeit Deiner Homepage verringern.

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 und Webfonts lokal einbinden mit dem Google Fonts Helper

Die Google Schriftarten lokal einzubinden und vom eigenen Webhosting laden zu lassen bringt mehr Performance und ist datenschutzgerecht. Und wirklich schwierig ist es auch nicht. Der Google Fonts Helper ist wirklich hilfreich.

Wie funktioniert der Google Fonts Download mit dem Webfont Helper?

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 Datenschutzgerecht und schnell 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«. Lade Dir den Font auf Deinen Desktop herunter.

Wie Du nach dem Google Fonts Download die Schriften laden lässt

Hier gebe ich Dir eine erprobte Lösung an die Hand, die ich seit Jahren selbst verwende. Du brauchst hierfür einen FTP-Zugang zu Deinem Webhosting und ein Child-Theme Deines WordPress Themes. Verwendest Du kein Child-Theme, ist der neu angelegte Ordner für die Webfonts beim nächsten Theme-Update voraussichtlich nicht mehr vorhanden.

Wie Du ein Child-Theme erstellen kannst

Erstelle in Deinem Child-Theme Ordner einen neuen Ordner namens »fonts«, entpacke die heruntergeladene Google Font Datei und kopiere die .WOFF und .WOFF2 Dateien in Deinen Font-Ordner.

Nachdem das erledigt ist, füge den folgenden Code in die functions.php Deines Themes. Hier empfehle ich Dir, den vollständigen Pfad zu dem Google Fonts Download im Font-Ordner zu verwenden.

Folgendes muss Du noch anpassen:

• Den Namen Deines Google Font
• Die korrekten Dateibezeichnungen (hier im Beispiel: advent-pro-v18-latin-regular)
• Den vollständigen Pfad zu Deinen Schriftarten-Ordner

Ich habe hier den Code des Google Webfont Helper um die Anweisung »font-display: swap;« ergänzt.

Weiterführende Informationen dazu: Fallback während Ladevorgang von Webfonts – font-display: swap;

<?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;
  font-display: swap;
  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;
  font-display: swap;
  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;
  font-display: swap;
  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.

Nach dem Google Fonts Download die Fonts per Plugin laden lassen

Wie binde ich Google Schriften lokal ein? Methode 2: Nutze diese 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.

Fazit:

Den Webfont als Google Fonts Download abmahnsicher und für mehr Performance in die eigene Website einzubinden ist keine große Kunst. Du kannst es mittels weniger Zeilen Code oder mit einem praktischen Plugin schnell erledigen und Dich an Deinen neuen Schriftarten erfreuen.

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