Google-Schriftarten vom eigenen Server laden

Viele von euch möchten auf den Abruf der Google-Schriftarten vom Google-Server verzichten. Die Gründe dafür sind vielseitig und können beim Datenschutz, bei Caching-Vorteilen oder der Reduzierung von Requests an unterschiedliche Server liegen. Um aber im Zuge dessen nicht auf die Schriftarten im Layout verzichten zu müssen, lassen sich diese auch vom eigenen Webserver bereitstellen.

Ich möchte euch hier eine einfache Variante vorstellen, dies mit einem Elmastudio-Theme umzusetzen.

Verhindern dass Google-Schriftarten vom Google-Server geladen werden

Speziell für Übersetzer wurde in den Elmastudio-Themes eine Möglichkeit eingebaut das Laden der Google-Schriftarten zu unterbinden. Diese Methode können wir für unseren Zweck genauso verwenden. Dazu wurden für die enthaltenen Schriftarten zu übersetzende Begriffe festgelegt, so dass beim Erstellen einer Übersetzung definiert werden kann, ob die Google-Schriftart geladen wird.

Übersetzungen lassen sich z.B. mit dem Loco-Translate-Plugin bequem aus dem Dashboard heraus bearbeiten und anlegen. Nach dessen Installation findet sich im Dashboard ein Loco-Translate-Menü, in dem vorhandene Übersetzungen bearbeitet und neue angelegt werden können. Bitte beachtet, dass WordPress-, Plugin- und Theme-Übersetzungen durch Updates überschrieben werden, wenn ihr diese direkt bearbeitet. Aus diesem Grund empfehle ich jeweils eine neue Übersetzungs-Datei anzulegen, auch wenn bereits eine entsprechende vorhanden ist. Diese Datei solltet ihr im vorgeschlagenen Verzeichnis "languages/loco/themes/…" ablegen lassen.

Am Beispiel Uku wäre euer Klickpfad wie folgt:
Loco Translate → Themes → Uku → New Language

Dort wählt ihr die entsprechende Sprache aus und klickt auf "Start Translating".

Nun könnt ihr nach "off" oder der jeweiligen Schriftart suchen um die entsprechenden Begriffe zu finden, mit deren Übersetzung ihr das Laden der Google-Schriftarten verhindern könnt. Im Feld für die Übersetzung müsst ihr nach der Auswahl des Begriffs lediglich "off" einfügen und mit einem Klick auf Speichern wird diese Schriftart nicht mehr vom Google-Server abgerufen. Solltet ihr bereits ein Mehrsprachigkeits-Plugin einsetzen, müsst ihr diesen Schritt für alle verwendeten Sprachen wiederholen.

Einbinden der Google-Schriften in einem Child-Theme

Voraussetzung für die Auslieferung der Google-Schriftarten vom eigenen Webserver ist ein Child-Theme. Hier erfahrt ihr mehr darüber, falls ihr noch keines installiert habt: Ein WordPress Child-Theme anlegen – so geht’s richtig.

Vorbereitete Child-Theme-Ordner sind in den Dokumentationen der jeweiligen Themes verlinkt. Der Einfachheit halber, habe ich die Links in der Theme-Liste am Ende des Artikels ebenfalls aufgeführt.

Die für die Elmastudio-Themes benötigten Schriftarten lassen sich in der Theme-Liste nachschlagen. Die folgende Seite hilft euch dabei die benötigten Schriftart-Dateien herunterzuladen und erstellt den CSS-Code um die Dateien auch einzubinden: Google-Webfonts-Helper.

Die heruntergeladenen Dateien (ZIP-Archiv, bitte entpacken) könnt ihr im Anschluss innerhalb eines „fonts“-Ordners im Child-Theme-Verzeichnis ablegen. Bitte ändert das „folder prefix“, damit die Schriftarten innerhalb des Child-Theme-Ordners gefunden werden zu „fonts/“. Der nach der Änderung dargestellte CSS-Code lässt sich nun kopieren und in der style.css-Datei eures Child-Themes unterbringen.

Nun werden die Google-Schriftarten von euerm Server ausgeliefert und es findet kein Abruf mehr von den Google-Servern statt. Wenn ihr auf Probleme stosst oder meine Ausführungen missverständlich sein sollten, freue ich mich über Nachfragen in den Kommentaren oder in unserem Theme Support-Forum.

Theme-Liste

Theme Schriftarten
Baylys (Child-Theme-Download) Open Sans, Latin und Ext-Latin in den Schriftstärken normal 300, 400, 700, 800 und kursiv 300, 400, 700.
Black Walnut (Child-Theme-Download) Source Code Pro, Latin und Ext-Latin in den Schriftstärken normal 300, 400, 600.
Playfair Display, Latin und Ext-Latin in der Schriftstärke kursiv 400.
Bugis (Child-Theme-Download) Anton in allen verfügbaren Variationen.
Cocoa (Child-Theme-Download) Libre Baskerville, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400.
Dorayaki (Child-Theme-Download) Domine, Latin und Ext-Latin in den Schriftstärken normal 400, 700.
Lato, Latin und Ext-Latin in den Schriftstärken normal 400, 900.
Hawea (Child-Theme-Download) Amiri, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400.
Kerikeri (Child-Theme-Download) Helvetica Neue, keine Google-Schriftart.
Kiore Moana (Child-Theme-Download) PT Sans, Latin und Ext-Latin in den Schriftstärken normal 400, 700.
Raleway, Latin und Ext-Latin in den Schriftstärken normal 400, 800, 900.
Meola (Child-Theme-Download) Open Sans, Latin und Ext-Latin in den Schriftstärken normal 300, 400, 700, 800 und kursiv 300, 400, 700.
Moka (Child-Theme-Download) Lato, Latin und Ext-Latin in den Schriftstärken normal 400, 700, 900 und kursiv 400, 700.
Namba (Child-Theme-Download) Cabin, Latin und Ext-Latin in den Schriftstärken normal 400, 700.
Satisfy in allen verfügbaren Variationen.
Neubau (Child-Theme-Download) Work Sans, Latin und Ext-Latin in den Schriftstärken normal 300, 400, 600, 800.
Amiri, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Nilmini (Child-Theme-Download) Helvetica Neue und Georgia, keine Google-Schriftarten.
Nori (Child-Theme-Download) Helvetica Neue, keine Google-Schriftart.
Oita (Child-Theme-Download) Crimson Text, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Raleway, Latin und Ext-Latin in den Schriftstärken normal 400, 700.
Onigiri (Child-Theme-Download) Merriweather, Latin und Ext-Latin in den Schriftstärken normal 400, 700, 900 und kursiv 400.
Piha (Child-Theme-Download) Lucida Grande, keine Google-Schriftart.
Pohutukawa (Child-Theme-Download) PT Sans, Latin und Ext-Latin in der Schriftstärke normal 700.
Ponsonby (Child-Theme-Download) Open Sans, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
PT Serif, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Pukeko (Child-Theme-Download) Cardo, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400.
Roboto, Latin und Ext-Latin in den Schriftstärken normal 300, 400, 500, 700 und kursiv 300, 400, 500, 700.
Renkon (Child-Theme-Download) Lato, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Playfair Display, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Suidobashi (Child-Theme-Download) Source Sans Pro, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400.
Tatami (Child-Theme-Download) Open Sans, Latin und Ext-Latin in den Schriftstärken normal 400, 600, 700 und kursiv 400, 600, 700.
Ubud (Child-Theme-Download) Helvetica Neue, keine Google-Schriftart.
Uku (Child-Theme-Download) Standard-Designstil
Noticia Text, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Kanit, Latin und Ext-Latin in den Schriftstärken normal 400, 500, 600, 700.
Neo-Designstil
Source Serif Pro, Latin und Ext-Latin in den Schriftstärken normal 400, 600, 700.
Poppins, Latin und Ext-Latin in den Schriftstärken normal 400, 500, 600, 700.
Serif-Designstil
Poppins, Latin und Ext-Latin in den Schriftstärken normal 400, 500, 600, 700.
Cormorant Garamond, Latin und Ext-Latin in den Schriftstärken normal 400, 500, 700 und kursiv 400, 700.
Waipoua (Child-Theme-Download) PT Sans, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400.
Oswald in allen verfügbaren Variationen.
Werkstatt (Child-Theme-Download) Rubik, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Weta (Child-Theme-Download) Source Sans Pro, Latin und Ext-Latin in den Schriftstärken normal 400, 600 und kursiv 400, 600.
Zeitreise (Child-Theme-Download) Martel Sans, Latin und Ext-Latin in den Schriftstärken normal 400, 700, 800, 900.
Zuki (Child-Theme-Download) Karla, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400, 700.
Libre Baskerville, Latin und Ext-Latin in den Schriftstärken normal 400, 700 und kursiv 400.

9 Kommentare zu “Google-Schriftarten vom eigenen Server laden

  1. Hi Marc,

    vielen Dank für den Beitrag. Für Hawea hat das wunderbar geklappt mit dem Ausschalten der Google Fonts. Bei Dorayaki kann ich die Schriften aber leider nicht über das Loco Translate Plugin finden.
    Gibt es noch eine andere Möglichkeit?

    Liebe Grüße,
    Jessie

    • Hallo Jessie,

      vielen Dank für den Hinweis. Im Dorayaki-Theme ist dieser String in der Sprachdatei nicht enthalten, darüberhinaus fehlt jedoch leider das benötigte Template um eine neue Übersetzung anzulegen. Loco Translate kann dieses Template aber selbst erstellen und sollte dich dazu auffordern, wenn du auf „New Language“ klickst.

      Die folgenden beiden Rückfragen erscheinen daraufhin, bei denen du bitte jeweils auf „Create Template“ klickst um im Anschluss der obigen Anleitung weiter folgen zu können.

      Viele Grüße
      Marc

  2. Walter Stöber

    Hi Ellen,
    das ist ja eine coole Funktion. Danke für den Tipp. Leider habe ich festgestellt, die Schriftart „Droid“ vom Yoko-Theme im Google-Font-Helper nicht mehr bereitgestellt wird. Ich habe daraufhin eine andere Quelle aufgetan, leider nicht mit den entsprechenden Schriftschnitten. Kannst du mir da einen Tipp geben?

    Gruß
    Walter

  3. juliahollweck

    Hi Marc,
    vielen Dank für die tolle Anleitung! Ich konnte alle Schritte ausführen, aber ich glaube, dass trotzdem noch Googlefonts extern geladen werden. Wenn ich in Crome auf „untersuchen“ gehe und bei „Sources“ nachsehe steht da immer noch „fonts.googleapis.com“ und „fonts.gstatic.com“, auch nachdem ich die Browserdaten zwischenzeitlich mal gelöscht habe.
    Wo könnte der Fehler begraben sein?

    Vielen Dank schon jetzt für deine Hilfe,
    Julia

    • Hallo Julia,

      wenn du kein Plugin nutzt, das vielleicht weitere Google-Schriftarten einbindet und du die Übersetzungen für alle Sprachen angelegt hast, sollten keine Schriftarten mehr von den Google-Servern abgerufen werden. Gerne schaue ich mir deine Seite einmal an, wenn du dazu ein Ticket in unserem Theme Support-Forum öffnest.

      Viele Grüße
      Marc

  4. Hallo,
    leider stelle ich gerade fest, dass es die Open Sans in 400 da gar nicht gibt… Ich hatte gehofft, dass ich es hinkriege, wenn ich strikt nach Anleitung gehe – leider scheitert es bei Tatami (und mir) schon daran. Gibt es da eine einfache Lösung? Programmierkenntnisse fehlen mir leider.

    Eine Frage noch zum Übersetzungsplugin: das Verzeichnis „languages/tatami/themes/…“ erstelle ich im Plugin? Oder muss ich das über ein ftp Programm direkt in den Ordnern machen?

    Jetzt habe ich schon so viel der notwendigen Änderungen hingekriegt, aber anscheinend brauche ich jetzt doch noch einen Experten :/

    Eine Frage noch – gibt es Updates vom Tatami Theme die wichtig wären für die Datenschutzgeschichte? Ich habe das damals installiert, ich glaube nicht mehr aktualisiert.

    Danke euch!

  5. Hallo Marc,
    hat bei Pukeko funktioniert. Danke für die Anleitung!
    Katrin

  6. Danke für die Anleitung! Hat bei Zeitreise perfekt funktioniert.

Hinterlasse eine Antwort

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