Google Fonts in Elementor lokal einbinden

So geht es nach dem Elementor-Update in zwei Klicks!

Google Fonts kannst du direkt in Elementor lokal einbinden, indem du die Funktion „Google Fonts lokal laden“ aktivierst. Das umständliche Herunterladen, Konvertieren und Hochladen der einzelnen Schriftdateien kannst du dir damit sparen. Die Funktion steht auch in der kostenlosen Version von Elementor zur Verfügung und ist mit wenigen Klicks eingerichtet.

In diesem Mini-Tutorial zeige ich dir Schritt für Schritt, welche Einstellungen du aktivieren musst und wie du anschließend prüfst, ob deine Google Fonts wirklich lokal geladen werden.

2022 ging eine massive Welle durchs Netz, als es ein Urteil zur Nutzung der Google Fonts direkt über den Google Server gab. Klicke hier zu meinem Beitrag zu den Google Fonts aus 2022

Dieser alte Beitrag ist trotzdem relevant für dich, denn darin erfährst du, was passiert, wenn du Google Fonts direkt über den Google Server in den USA lädst und was das technisch und rechtlich bedeutet.

Außerdem können Google Fonts noch über dein Theme oder weitere Dienste auf deiner Website aktiv sein. Deshalb musst du das unbedingt prüfen!

Darum sind Google Fonts so genial

In Googles Schriften-Bibliothek auf fonts.google.com findest du 1798 Schriftfamilien (Stand Februar 2025), die du kostenlos und lizenzfrei nutzen kannst – für deine Dokumente auf dem Computer, deine Social Media-Posts und natürlich auf deiner Website.

Das Geniale: Du kannst die Schriften hier auf Herz und Nieren prüfen. Die Größe anpassen, eigenen Text eintragen, um zu sehen, wie einzelne Worte bzw. Buchstaben der gewählten Schrift wirken.

Du glaubst gar nicht, wie oft ich schon eine Schrift nicht genutzt habe, weil das „W“ wie Website hässlich aussah 😂.

In diesem neuen Mini-Tutorial erfährst du, wie du mit Elementor die Google Fonts easy peasy lokal auf deine Website bringst.

Das Beste: Die neue Möglichkeit, Google Fonts lokal in Elementor zu nutzen, steht dir auch in der kostenlosen Version des Pagebuilders zur Verfügung.

Und damit hat Elementor ein wirklich geniales Feature geschaffen, das dir deine Arbeit erleichtert. Denn mal ehrlich: Das Konvertieren der Schriften war schon mehr als nervig – vor allem, wenn die Onlinetools tagelang nicht erreichbar bzw. überlastet waren.

Apropos Arbeit erleichtern: Mit Elementor Pro* machst du dir das Gestalten deiner Website nicht nur richtig leicht, du sparst dir auch viele weitere Plugins, die du für eine geniale Business-Website brauchst.

So bindest du die Google Fonts auf zwei Klicks in Elementor ein:

Stelle sicher, dass du die aktuellste Version von Elementor installiert hast. Zeigt dein Elementor-Plugin ein Update an, klicke auf „Jetzt aktualisieren“.

Schritt 1: Google Fonts in Elementor aktiveren

  1. Gehe in deinem WordPress Backend in den Elementor-Einstellungen zum Unterpunkt „Erweitert“.
  2. Klicke beim Punkt „Google Fonts“ ins Dropdown-Feld und wähle „Aktivieren“.
  3. Klicke beim Punkt „Google Fonts laden“ ins Dropdown-Feld und wähle „Tauschen“ bzw. „Swap“.
  4. Speichere die Änderungen.
Screenshot aus den Elementor Einstellungen: Google Fonts aktivieren.

Schritt 2: Binde die Google Fonts lokal ein

  1. Gehe jetzt in den Elementor-Einstellungen zum Unterpunkt „Leistung“.
  2. Hier klickst du beim Punkt „Google Fonts lokal laden“ ins Dropdown-Feld und wählst „Aktivieren“.
  3. Speichere deine Änderung.
Screenshot aus den Elementor Eigenschaften: Google Fonts lokal einbinden.

Die Google Fonts sind jetzt in Elementor lokal eingebunden.

Gehe in die Elementor Website-Einstellungen und schaue unter dem Punkt „Typographie“ nach:

Du findest dort jetzt alle Google Fonts sowie auch Neuheiten über „Early Access“ und kannst sie jetzt für deine Schriften nutzen.

Screenshot aus den Elementor Website-Einstellungen im Bereich Typographie: Auswahl der Google Fonts.
10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

Hattest du bereits Google Fonts über ein Plugin oder direkt in Elementor Pro hochgeladen?

Prüfe zunächst in deinem Quellcode, ob die Google Fonts lokal geladen werden. Wie das geht, erfährst du in meinem alten Beitrag „So bindest du deine Google Fonts DSGVO-konform auf deiner Website ein„.

Werden keine Google Fonts über den US-Server geladen, z. B. über dein Theme oder weitere Tools, kannst du die hochgeladenen Schrift-Dateien aus deinen Medien löschen und das eventuell zum lokalen Einbinden der Fonts genutzte Plugin löschen.

Wie kommen gekaufte Schriften in den Elementor?

Auch hier gibt es inzwischen eine Abkürzung und die heißt „Variable Fonts“ (nur in Elementor Pro*) – noch so ein geniales Feature!

Hier lädst du deine gekaufte Schriftdatei direkt bei Elementor hoch und Elementor erledigt den Rest. D.h. dass du alle Größen, Schriftschnitte und Auszeichnungen (z. B. kursiv) mit nur einer Schriftdatei nutzen kannst.

Grundsätzliches zur Nutzung von Schriften auf deiner Website:

Auch wenn dir jetzt ALLE Google Fonts zur Verfügung stehen, heißt das nicht, dass du dich hier austoben sollst, indem du wahllos Schriften auf deiner Website nutzt.

Wähle zwei Schriften aus, die du konsequent nutzt – eine Schrift für deine Überschriften, eine Schrift für deinen Fließtext.

Erfahre hier, wie du Schriften auf deiner Website und in Social Media kombinierst.

FAQ - Häufige Fragen zu Google Fonts in Elementor lokal einbinden

Wie kann ich Google Fonts in Elementor lokal einbinden?

Aktiviere in den Elementor-Einstellungen unter „Leistung“ die Funktion „Google Fonts lokal laden“. Elementor speichert die verwendeten Schriften anschließend auf deinem eigenen Webserver und lädt sie nicht mehr direkt von Google.

Brauche ich Elementor Pro, um Google Fonts lokal zu laden?

Nein. Du kannst Google Fonts auch mit der kostenlosen Version von Elementor lokal einbinden. Ein zusätzliches Plugin ist dafür ebenfalls nicht notwendig.

Warum sollte ich Google Fonts lokal einbinden?

Beim lokalen Laden werden die Schriftdateien von deinem eigenen Server bereitgestellt. Dadurch muss beim Aufruf deiner Website keine direkte Verbindung zu den Google-Servern hergestellt werden. Das ist insbesondere im Hinblick auf Datenschutz und Ladezeit sinnvoll.

Muss ich die Google Fonts vorher herunterladen und hochladen?

Nein. Mit der integrierten Elementor-Funktion musst du die Schriftdateien nicht selbst herunterladen, konvertieren und hochladen. Elementor übernimmt die lokale Bereitstellung automatisch.

Wie kann ich prüfen, ob meine Google Fonts wirklich lokal geladen werden?

Öffne deine Website in einem privaten Browserfenster und kontrolliere über die Entwicklerwerkzeuge oder einen Google-Fonts-Checker, von welcher Domain die Schriftdateien geladen werden. Es sollten keine Anfragen mehr an Domains wie fonts.googleapis.com oder fonts.gstatic.com gesendet werden.

Werden automatisch alle Google Fonts lokal gespeichert oder nur die tatsächlich verwendeten?

Elementor erkennt, welche Google Fonts auf deinen Seiten verwendet werden, und stellt diese lokal bereit. Nicht verwendete Schriften werden daher nicht pauschal geladen. Auch die zugehörigen Ressourcen werden grundsätzlich nur auf den Seiten eingebunden, auf denen sie tatsächlich benötigt werden.

Was kann ich tun, wenn eine Schrift nach der Umstellung nicht mehr richtig angezeigt wird?

Leere zuerst den Cache deines Cache-Plugins, deines Hostings und deines Browsers. Prüfe außerdem, ob die WordPress- und Website-Adresse vollständig über HTTPS laufen. Besteht das Problem weiterhin, kannst du in den Elementor Werkzeugen die CSS-Dateien und Daten neu generieren. Nach einem Umzug oder Domainwechsel solltest du zusätzlich kontrollieren, ob noch alte URLs in den Schriftdateien hinterlegt sind.

*Werbe-Link
Der mit * gekennzeichnete Link ist ein Affiliate Link. Das heißt, ich bekomme eine kleine Provision, wenn du dir hierüber Elementor Pro holst. Am Preis für dich ändert das natürlich nichts.

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

2 Responses

Schreibe einen Kommentar

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

Lies hier weiter:

So bindest du Google Fonts lokal auf deiner Website ein

Google Fonts DSGVO-konform einbinden

Lädt deine Website Google Fonts noch direkt von den Google-Servern? Dann werden möglicherweise Daten deiner Besucherinnen und Besucher übertragen. In dieser Anleitung zeige ich dir Schritt für Schritt, wie du Google Fonts lokal einbindest, unnötige Verbindungen entfernst und anschließend prüfst, ob alles richtig funktioniert.
So entwickelst du deinen Website Stil

So enwickelst du deinen Website-Stil

Es dauert ganze 3 Sekunden, in denen dein Website-Besucher entscheidet ob er bleibt oder geht. Stellt sich innerhalb dieser kurzen Zeit nicht das richtige Feeling ein, klickt er weg. Für das richtige Gefühl auf deiner Website sorgst du mit deinem Website-Stil.
Schriften kombinieren auf der Website

So kombinierst du Schriften

Schriften spielen viel zu oft eine untergeordnete Rolle auf Website und Social Media. Dabei komplettieren sie den Look, den Du mit Farben und Bildern herstellst und machen Dein Branding einzigartig. Erfahre hier, welche Schriftpaare auf Website und in Social Media zeitlos und schwer angesagt sind.
Melde dich hier für den Newsletter von Frau König an:

Du kannst dich jederzeit wieder vom Newsletter abmelden. Hinweise zum Umgang mit deinen Daten findest du unter Datenschutz.