Blog

Google Fonts auf eigenem Webserver in WordPress einbinden

Google Fonts auf eigenem Webserver in WordPress einbinden

WordPress - Tipps & Tricks
Lesedauer: 5 min

Das Einbinden von Google Fonts in die eigene Website ist eine feine Sache: Es geht einfach und die riesige Auswahl der Schriften gibt der Internetpräsenz einen individuellen Touch. Aber das ganze Leben ist ein Kompromiss: Nicht nur wird die Website verlangsamt, es drohen künftig auch Herausforderungen im Datenschutz in Verbindung mit DSGVO. In diesem Beitrag beschrieben wir, wie Sie die Vielfalt der Goole Fonts trotzdem nutzen können und beide Probleme umgehen.

Was sind Google Fonts?

Google Fonts bietet Ihnen eine Auswahl aus über 850 kostenlosen Schriften, die Sie nach Ihrem Geschmack und passend zu Ihrem Design auf Ihrer Website verwenden können.

In den Anfangszeiten des Internets war man als Webdesigner mehr oder weniger auf die Fonts angewiesen, die die Betriebssysteme der Website-Besucher zur Verfügung stellten. Um mehr Vielfalt zu ermöglichen, wurde Ende der 1990er Idee der „downloadbaren Schriftarten“ entwickelt.

Als dann die Mehrheit der Browser die Einbindung externer Schriften in die eigene Website unterstützte, hat Google mit seinen Webfonts die Idee schnelle aufgegriffen und eine große Bibliothek „freier“ Schriften ins Netz gestellt.

Was spricht gegen die Einbindung von Google Fonts?

Geschwindigkeit

In Zeiten, wo wir (nicht zuletzt von Google gedrängt) darauf achten sollten, dass unsere Websites so schnell wie möglich laden, bieten extern eingebundene Ressourcen natürlich Optimierungspotenzial. Zwar hat Google sicherlich sehr schnelle Server, dennoch muss der Besucher beim Aufruf einer Website ein paar Sekundenbruchteile warten, bis die nötigen Dateien vom fremden Server geladen sind und die Website in voller Pracht angezeigt werden kann.

Datenschutz

Jedesmal, wenn Sie eine Webseite aufrufen, die Google Fonts eingebunden hat, lädt Ihr Browser die benötigten Schriften vom Google Server oder „erkundigt“ sich, ob es eine Änderung der Schriften gegeben hat. Dabei werden im Hintergrund eine Menge Daten übertragen. Unter anderem landet die IP-Adresse des Besuchers auf den Google-Servern. Nicht zuletzt in Zeiten der Datenschutz-Grundverordnung DSGVO ein Problem.

Die Lösung: Google Fonts auf dem eigenen Server

Wie kann man nun die Vorteile der Schriftenvielfallt nutzen, ohne Kompromisse bei der Geschwindigkeit und dem Datenschutz einzugehen?

Zum Glück bietet Google die Möglichkeit die Schriften herunterzuladen und auf dem eigenen Server zu installieren. Die Open-Source-Fonts im Google Fonts-Katalog werden unter Lizenzen veröffentlicht, die es Ihnen ermöglichen, sie auf einer beliebigen Website zu verwenden, sei es geschäftlich oder privat.

Wie kann ich Google Fonts auf meinen Webserver laden?

1. Genutzte Google Fonts identifizieren

Zunächst einmal müssen Sie überprüfen, welche Google Fonts Sie auf Ihre Website einbinden.

Der einfachste Weg ist es, die verwendeten Fonts Ihrer Website über das Entwickler-Tool in Chrome herausfinden. Im Chrome-Browser klicken Sie einfach mit einem „Rechtsklick“ in ein Seite Ihrer Website. Es öffnet sich an der Stelle ein Pop-up-Menü. Dort wählen Sie „Untersuchen„. Es öffnet sich am unteren Rand des Browsers ein Bereich, der für Entwickler vorgesehen ist. Unter dem Punkt „Sources“ können Sie nachvollziehen, von welchen Quellen Daten für Ihre Website geladen werden.

Übrigens können Sie auf diese Weise später überprüfen, ob tatsächlich keine Verbindung mehr zum Google Server hergestellt wird.

Google Chrome "Source" zur Identifizierung von Google Fonts

Google Chrome: „Source“ zur Identifizierung von Google Fonts

2. Google Fonts herunterladen

Zunächst müssen wir die Google Fonts herunterladen. Rufen Sie dazu die Website Google Fonts auf und suchen sich die passende(n) Schritte(en) aus. Klicken Sie auf „SELECT THIS FONT“ oben rechts in der Ecke. Wiederholen Sie die Prozedur, bis Sie sich die gewünschten Schriften zusammengestellt haben.

Schritt 1 - Google Webfont auswählen

Schritt 1 – Google Webfont auswählen

Um die ausgewählten Schriften herunterladen zu können, klicken Sie rechts unten auf den Bereich „Family Selected“. Die gesammelten Schriften werden nun angezeigt. Zum Download klicken Sie auf das „Download-Icon“ rechts oben im Kästchen der angezeigten Schriften:

Schritt 2 - Google Fonts herunterladen

Schritt 2 – Google Fonts herunterladen

Sie erhalten eine gepackte ZIP-Datei, die die gewünscht(en) Schriften im TrueType-Format (.ttf) enthält. Diese können sie so allerdings noch nicht auf Ihrer Website verwenden. Sie müssen die Fonts mit Hilfe von Diensten im Web in Webfonts (Zum Beispiel .woff, .woff2 und .eot) umwandeln. Wir haben gute Erfahrung mit transfonter.org machen können.

Dieser direkte Weg über Google Fonts ist zugegebener Maßen etwas kompliziert. Aber zum Glück gibt es eine Erleichterung namens google-webfonts-helper von Mario Ranftl. Bei diesem Dienst können Sie nicht nur einfach die für Ihre Website passenden Schriftgrößen auswählen, Sie erhalten den passenden CSS-Code und alle benötigten Font-Formate aus einer Hand:

Alternativer Schritt 2 - Google Fonts herunterladen

Alternativer Schritt 2 – Google Fonts herunterladen

3. Google Fonts auf den eigenen Server hochladen

Haben Sie alle benötigten Dateien zusammengestellt, laden Sie die Fonts mit Hilfe Ihrer FTP-Software auf Ihren Server hoch. Am besten platzieren Sie die gewünschten Fonts in einem Unterverzeichnis (zum Beispiel /fonts/)eines eingerichteten Child-Themes:

Google Fonts per FTP auf den Webserver hochladen

Google Fonts per FTP auf den Webserver hochladen

4. Google Fonts in Ihrer Website einbinden

In der CSS-Datei des Child-Themes kopieren Sie für alle benötigten Schriften den CSS-Code, den Ihnen zum Beispiel google-webfonts-helper mitgeliefert hat. Zum Beispiel:

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

Wichtig: Bitte stellen Sie sicher, dass Sie den richtigen Zielpfad für die Schriftartdateien haben, der davon abhängt, wo Sie sie auf Ihrem Server die Fonts hochgeladen haben.

Im nächsten Schritt müssen Sie nun in der CSS-Datei Ihres Child-Themes die Schriften den gewünschten Elementen zuordnen. Zum Beispiel:

body {
 font-family: "Oswald"!important;
 }
h1, h2, h3, h4, h5, h6 {
 font-family: "Oswald"!important;
 }

5. Verbindung zu Google kappen und Abschlusstest.

Da viele Themes heutzutage Google Fonts direkt zur Verfügung stellen. Müssen Sie sicherstellen, dass die Fonts nicht trotz Ihrer ganzen Mühen weiterhin geladen werden. Setzen Sie sich mit Ihrem Theme-Entwickler in Verbindung und fragen, wie Sie die Google Fonts deaktivieren können.

Bei dem Theme Enfold* zum Beispiel tragen Sie den folgenden Code in die functions.php des Child Themes:

/* Google Fonts deaktivieren */
add_action( 'init', 'enfold_customization_switch_fonts' );

function enfold_customization_switch_fonts() {
	global $avia;
	$avia->style->print_extra_output = false;
}

Sie können aber auch das Plug-in Remove Google Fonts References installieren. Die Erweiterung muss lediglich installiert und aktiviert werden – eine Konfiguration ist nicht notwendig.

Anschließend löschen Sie ggf. Ihren „Cache„, laden Ihre Website neu und prüfen, ob die Schriften noch wie gewünscht geladen und dargestellt werden.

Zum Schluss können Sie noch mal die Chromes Entwickler-Tools bemühen, um sicherzustellen, dass Ihre Website tatsächlich nicht mehr zu den Google-Servern funkt. Wenn anstatt der zuvor noch angezeigten Verbindungen zum Google Server (fonts.googleapis.com, fonts.static.com) nun die lokalen Schriften aufgeführt werden, habt Sie die Schriften erfolgreich eingebunden.

6. Sonderfall: Google Maps

Sollten Sie Google Maps verwenden, dann wird Ihnen der Abschlusstest eine Enttäuschung bereiten: Google lädt nämlich die Schrift Roboto von seinen Servern. Zum Glück haben wir eine Anleitung gefunden, die auch dieses Problem löst:

  1. Erstellen Sie eine Datei /js/norobotofontbymaps.js in dem Verzeichnis Ihres Child Themes.
  2. Kopieren Sie diesen Code in die Datei norobotofontbymaps.js:
    var head = document.getElementsByTagName('head')[0];// Save the original method
    var insertBefore = head.insertBefore;
    // Replace it!
    head.insertBefore = function (newElement, referenceElement) {
    if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
    console.info('Prevented Roboto from loading!');
    return;
    }
    insertBefore.call(head, newElement, referenceElement);
    };
  3. Fügen Sie den folgenden Code zu Ihrer Functions.php des Child Themes:
    /*prevent roboto fonts loaded by google maps api*/
    $child_theme_url = get_stylesheet_directory_uri();
    wp_register_script( 'norobotofontbymaps', $child_theme_url.'/js/norobotofontbymaps.js', 'jquery', "1", true);
    wp_enqueue_script( 'norobotofontbymaps' );

Anmerkung: *) ist ein “Partnerlink”. Wenn Sie auf den Link klicken und einen Artikel kaufen, erhalten wir eine Provision. Auf Ihren Kaufpreis hat es keine Auswirkung. Vielen Dank für Ihre Unterstützung!

, , ,
Lesedauer: 5 min

12 Kommentare. Hinterlasse eine Antwort

  • Hallo, das funktioniert bestens. Aber ist es auch rechtlich zulässig?

    Antworten
  • Hi.
    Wie stelle ich denn fest, welche Google fonts denn überhaupt geladen werden?

    Antworten
    • Moin Markus,

      wähle mit Hilfe des Chrome-Browsers per Rechtsklick „Untersuchen“. “Untersuchen“. Es öffnet sich am unteren Rand des Browsers ein Bereich, der für Entwickler vorgesehen ist. Unter dem Punkt „Sources“ kannst Du nachvollziehen, von welchen Quellen Daten für Deine Website geladen werden.

      Ahoi!
      Thorsten

      Antworten
  • Das Plug-in „Disable Google Fonts“ funktioniert seit WordPress Version 4.6 nur noch bei einigen WordPress Standardthemes.

    Antworten
  • Karsten Schmidt
    3. Juli 2018 17:19

    Moin, Danke für diese Anleitung! Bei mir wird jetzt aber die Schrift ganz zum Schluss geladen und das sieht etwas seltsam aus. Hättest Du eine Erklärung, was ich da falsch mache? Vielen Dank!

    Antworten
    • Moin Karsten,

      das kann damit zusammenhängen, wo und wie Du den CSS-Code eingefügt hast. Die Möglichkeiten sind von Theme zu Theme verschieden. Grundsätzlich sollten die Schriften möglichst vorn im zu ladenden CSS-Code stehen.
      Ein weiterer Faktor könnte aber auch ein langsamer Server sein, der sich nun beim trägen Laden des CSS-Codes bemerkbar macht.

      Ahoi!
      Thorsten

      Antworten
  • Hallo Thorsten,
    gibt es nicht auch Gründe, die dafür sprechen, Fonts extern einzubinden? Könntest Du diese vielleicht noch einmal kurz ansprechen?
    Vielen Dank dafür!

    Antworten
    • Moin Michael,

      ad hoc fallen mir da nicht wirklich gute Gründe ein. Google Fonts ist seit langem eine sehr schöner Weg, Websites eine individuelle Typografie zu spendieren.
      In Zeiten von DSGVO ist es aber nun ratsam, die Fonts herunterzuladen und auf dem eigenen Server zu installieren.

      Ahoi!
      Thorsten

      Antworten
  • Hallo Thorsten, danke für die wirklich „idiotensichere“ Anleitung. Leider klappt es bei mir trotzdem nicht :(
    Ich habe alles so gemacht wie beschrieben (mit alternativem Schritt 2). Den Ordner mit den Fonts habe ich zunächst in den Child-Theme Ordner gelegt und den Pfad entsprechend angepasst. Nachdem das nicht funktionierte, hab ich ihn ins Stammverzeichnis verschoben und den Pfad auf url(‚fonts/…) geändert – funktioniert auch nicht. Es werden nur Sytemschriftarten geladen.
    Woran könnte das liegen? ich habe das Theme Enfold, Nr. 5 habe ich durchgeführt – das funktioniert.
    Danke für einen Tipp!
    Ciao

    Antworten

Schreiben Sie einen Kommentar zu Michael Antworten abbrechen

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

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.

Menü