Elmastudio

Contents

Google-Schriftarten vom eigenen Server laden

·
URL kopierenBeitrag als Markdown kopieren

Aktualisiert im September 2026: Die Child-Themes in der Liste am Ende liegen inzwischen auf GitHub. Die Anleitung selbst funktioniert unverändert.

Viele von euch wollen die Google-Schriftarten nicht mehr von Googles Servern laden. Die Gründe sind unterschiedlich: Datenschutz, Caching oder einfach weniger Anfragen an fremde Server. Auf die Schriften im Layout musst du deshalb nicht verzichten, denn du kannst sie genauso gut von deinem eigenen Webspace ausliefern.

Hier zeige ich dir, wie das mit einem Elmastudio-Theme in zwei Schritten geht. Zuerst schalten wir den Abruf bei Google ab, dann binden wir die Schriftdateien über ein Child-Theme lokal ein.

Den Abruf von Googles Servern abschalten

In den Elmastudio-Themes gibt es dafür einen kleinen Kniff, der eigentlich für Übersetzer:innen gedacht war. Jede Google-Schriftart hat im Theme einen übersetzbaren Text. Übersetzt du ihn mit „off“, wird die Schrift nicht mehr von Google geladen. Genau diesen Weg nutzen wir.

Übersetzungen legst du am bequemsten mit dem Plugin Loco Translate direkt im Dashboard an. Nach der Installation findest du dort den Menüpunkt Loco Translate. Wichtig: Bearbeite nicht die mitgelieferten Sprachdateien, die überschreibt das nächste Theme-Update. Leg stattdessen eine neue Datei an, auch wenn es für deine Sprache schon eine gibt, und lass sie im vorgeschlagenen Ordner „languages/loco/themes/…“ speichern.

Am Beispiel Uku sieht der Klickpfad so aus:
Loco Translate → Themes → Uku → New Language

Dort wählst du deine Sprache und klickst auf „Start Translating“.

Jetzt suchst du nach „off“ oder nach dem Namen der Schriftart. Bei jedem Treffer trägst du im Übersetzungsfeld nur „off“ ein und speicherst. Ab dann ruft das Theme diese Schrift nicht mehr bei Google ab. Nutzt du ein Mehrsprachigkeits-Plugin, wiederholst du das für jede Sprache.

Die Schriftdateien über ein Child-Theme einbinden

Für den zweiten Schritt brauchst du ein Child-Theme. Falls du noch keines hast, hilft dir dieser Artikel: Ein WordPress Child-Theme anlegen – so geht’s richtig.

Für jedes Theme gibt es einen fertigen Child-Theme-Starter auf GitHub. Die Links findest du in der Theme-Liste am Ende des Artikels. Dort steht auch, welche Schriftarten das jeweilige Theme braucht.

Die Schriftdateien selbst und den passenden CSS-Code liefert dir der Google Webfonts Helper.

Entpacke das heruntergeladene ZIP-Archiv und lege die Dateien in einen Ordner „fonts“ in deinem Child-Theme. Im Webfonts Helper änderst du das „folder prefix“ auf „fonts/“, damit die Pfade stimmen. Den angezeigten CSS-Code kopierst du dann in die style.css deines Child-Themes.

Das war’s. Die Schriften kommen jetzt von deinem Server, und es geht keine Anfrage mehr an Google. Wenn etwas nicht klappt oder unklar ist, schreib mir in den Kommentaren.

Theme-Liste

ThemeSchriftarten
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.
Kategorien: ,
Schlagwörter: , , , , ,

Manuel Esposito

Manuel ist Mitgründer von Elmastudio. Er arbeitet vor allem an KI-Projekten und KI-Experimenten, mit zwei Dingen im Kopf: Designsystemen und lokaler KI, die auf dem eigenen Rechner läuft und die eigenen Daten dort lässt, wo sie hingehören, nämlich bei einem selbst. Er liebt Kunst und sucht immer nach der minimalsten Designlösung, denn weniger ist mehr.

Gefällt dir, was wir hier machen? Dann abonniere unseren Newsletter oder YouTube-Kanal, das kostet dich nichts und hilft uns schon sehr. Wenn du einen Schritt weitergehen magst, lass unten ein kleines Dankeschön da. So bleibt Elmastudio für alle kostenlos, und wir schreiben weiter, wie seit 2009. Danke dir.Gefällt dir, was wir hier machen? Dann abonniere unseren YouTube-Kanal, das kostet dich nichts und hilft uns schon sehr. Wenn du einen Schritt weitergehen magst, lass unten ein kleines Dankeschön da. So bleibt Elmastudio für alle kostenlos, und wir schreiben weiter, wie seit 2009. Danke dir.

22 Kommentare

  1. Jessie

    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

    Antworten
    1. Marc

      Antwort an 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

      Antworten
  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

    Antworten
    1. Marc

      Antwort an Walter Stöber

      Hallo Walter,

      leider werden die Schriftarten „Droid Sans“ und „Droid Serif“ nicht mehr vom Google-Fonts-Projekt angeboten, aber derzeit noch durch die API ausgeliefert. Wenn du den folgenden Link aufrufst, siehst du den benötigten CSS-Code inkl. der Pfade zu den Schriftart-Dateien. Bitte beachte dass die Dateitypen und Pfade sich unterscheiden, wenn man den Link von unterschiedlichen Browsern aufruft (je nachdem, wie modern die Browser sind und ob sie bereits den aktuellen Standard unterstützen):

      https://fonts.googleapis.com/css?family=Droid+Sans%3A400%2C700%7CDroid+Serif%3A400%2C700%2C400italic%2C700italic&subset=latin%2Clatin-ext

      Viele Grüße
      Marc

      Antworten
      1. Walter

        Antwort an Marc

        Etwas verspätet, aber danke für deinen Support.

        Antworten
  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

    Antworten
    1. Marc

      Antwort an juliahollweck

      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

      Antworten
  4. Anja

    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!

    Antworten
    1. Marc

      Antwort an Anja

      Hallo Anja,
      wenn kein Schriftgewicht an der Auswahl steht, ist damit die 400 gemeint.

      Das Verzeichnis für die Sprachdatei wird vom Loco-Translate-Plugin selbst angelegt.

      Informationen zu den erschienene Tatami-Udpates findest du hier: http://themeupdates.elmastudio.de/category/tatami/

      Viele Grüße
      Marc

      Antworten
  5. Katrin

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

    Antworten
  6. Sebastian

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

    Antworten
  7. Sabine Kühlkamp

    Ich versuche einer Bekannten bei ihrer Bugis Seite zu helfen den google webfont Anton lokal einzubinden. Leider erscheint bei Loco translate :Inkompatibel mit deiner Version von WordPress.

    Was nun?

    Antworten
    1. Marc

      Antwort an Sabine Kühlkamp

      Hallo Sabine,

      ich vermute du verwendest keine aktuelle Version von WordPress. Bitte halte grundsätzlich WordPress auf dem aktuellen Stand. Bevor du jedoch eine Aktualisierung ausführst solltest du ein vollständiges Backup der Seite anlegen.

      Viele Grüße
      Marc

      Antworten
  8. Simone

    Hallo Marc,

    ich verwende das Dorayaki Theme und würde gern die Google Fonts kappen ohne das Plugin Loco Translate zu verwenden, weil ich das Plugin ansonsten gar nicht benötige. Gibt es einen Code für die functions.php, über den ich das einfacher machen kann?

    Antworten
    1. Marc

      Antwort an Simone

      Hallo Simone,

      dies sollte mit folgendem Code möglich sein:

      function dorayaki_child_scripts() {
	// Remove Google Webfonts
	wp_dequeue_style( 'dorayaki-fonts' );
}
add_action( 'wp_enqueue_scripts', 'dorayaki_child_scripts', 11 );

      Viele Grüße
      Marc

      Antworten
  9. Gabriele

    Hallo Marc!

    Prinzipiell komme ich mit dieser Anleitung sehr gut zurecht.
    Ich habe bei Pukeko-Child allerdings in der style.css Cardo und Roboto ersetzt durch poppins und Playfair Display, die entsprechenden Fonts-css eingefügt und die Fonts hochgeladen.
    Wenn ich diese beiden neuen Schriftarten in der functions.php vom Childtheme nicht registriere, kann der part mit loco translate entfallen, oder?
    Oder müssen die neuen Schriftarten unbedingt registriert werden?
    Danke, LG Gabriele

    Antworten
    1. Marc

      Antwort an Gabriele

      Hallo Gabriele,
      die neuen Schriftarten müssen nicht registriert werden. Wenn du jedoch verhindern möchtest, dass die vom Theme standardmäßig genutzten Schriftarten nicht von den Google-Servern geladen werden, kannst du mit Hilfe des „Loco Translate“-Plugins das Laden deaktivieren.

      Dies würde auch dann passieren, wenn die Schriftart laut CSS nicht genutzt wird.

      Viele Grüße
      Marc

      Antworten
  10. Sonja

    Hallo Marc,
    alle Versuche nach Eurer Anleitung funktionieren nicht bei meinem Waipoua Theme. Die Schriften werden nicht gefunden im Fenster. Gibt es eine spezielle Lösung?
    Viele Grüße Sonja

    Antworten
  11. Susanne

    Hallo Marc,

    mit Hilfe Eurer Anleitung konnte ich aus dem UKU-Theme erfolgreich das Laden der Cormorant-Garamound verhindern, jedoch gelingt es nicht mit der Poppins. Ist da irgendwas bekannt?

    Viele Grüße
    Susanne

    Antworten
  12. Frank

    Hi,
    hab diese Anleitung leider jetzt erst gefunden. Statt über das Übersetzungs-Plugin haben wir manuell die style.css des Child-Themes bearbeitet.
    Allerdings taucht – beispielsweise bei Tatami – noch folgender Code im Header auf:

    Ok, Zeilen 30 bis 35 der functions.php des main themes. Wie werd ich die in der functions.php des Child Themes los?

    Antworten
  13. Elmastudio Themes und der Datenschutz – Elmastudio

    […] übertragen. Möchtest du dies unterbinden, kannst du meiner Anleitung an folgender Stelle folgen: Google-Schriftarten vom eigenen Server laden. Am Ende des verlinkten Artikels findest du eine Theme-Liste um zu überprüfen ob das von dir […]

    Antworten
  14. Video-Tutorial: Ein WordPress Child-Theme erstellen – Elmastudio

    […] Für jedes Elmastudio-Theme gibt es inzwischen einen fertigen Child-Theme-Starter auf GitHub, zum Beispiel Uku Child. Die Links zu allen Themes findest du in der Theme-Liste im Artikel Google-Schriftarten vom eigenen Server laden. […]

    Antworten

Schreibe einen Kommentar

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

Expand sidebar⌘B
DEEN