Zum Inhalt wechseln
  • ÜBER MICH
  • PROJEKTE
  • MEINE ANGEBOTE
    • BRAND & WEBDESIGN
    • LANDINGPAGE & FUNNEL DESIGN
    • Conversion Optimierung
  • KURSE
    • Website Mastery
  • BLOG
  • FÜR 0€
    • Website Planer
    • Website Check
    • Videotraining
  • ÜBER MICH
  • PROJEKTE
  • MEINE ANGEBOTE
    • BRAND & WEBDESIGN
    • LANDINGPAGE & FUNNEL DESIGN
    • Conversion Optimierung
  • KURSE
    • Website Mastery
  • BLOG
  • FÜR 0€
    • Website Planer
    • Website Check
    • Videotraining
Termin aussuchen

Google Fonts lokal und rechtskonform einbinden mit Elementor

Wenn du für deine Webseite Google Fonts verwenden möchtest, solltest du diese lokal in deine Webseite einbinden, um Probleme mit dem Datenschutz zu vermeiden. Warum das überhaupt wichtig ist und wie das geht, erkläre ich dir in diesem Artikel.

Inhaltsverzeichnis

Google Fonts lokal und rechtskonform einbinden mit Elementor

Was sind überhaupt Google Fonts?

Vielleicht fragst du dich jetzt, was eigentlich Google Fonts sind und ob dich das überhaupt betrifft?

Google Fonts sind kostenlose Schriftarten, die von Google bereitgestellt werden und von jedem benutzt werden können. 

Du findest Google Fonts sowohl in den meisten Website Baukästen, aber auch Tools wie Canva oder Elementor.

Im Elementor Pagebuilder hast du neben ein paar Systemschriftarten fast nur Google Fonts, weshalb es sinnvoll ist, sich über die Verwendung einmal Gedanken zu machen.

Google Fonts rechtssicher verwenden: lokal in Elementor Pro einbinden

Warum ist das Verwenden von Google Fonts überhaupt ein Problem?

Wenn du dir eine Webseite ansiehst, die mit einer bestimmten Schriftart erstellt wurde, dann gibt es prinzipiell zwei Möglichkeiten:

  • Die verwendete Schriftart gehört zu den websicheren Schriftarten oder auch Systemschriftarten genannt. Diese sind auf allen Systemen und in allen Browsern bereits vorinstalliert.
  • Die verwendete Schriftart existiert nicht auf deinem Gerät und in deinem Browser und muss demnach erst einmal zur Verfügung gestellt werden.

Die meisten Tools wie der Elementor Pagebuilder hat bereits sehr viele Google Fonts vorinstalliert und bei der Verwendung dieser Schriftarten wird eine automatische Verbindung zum Server von Google erstellt.

Google liest dabei die Daten deiner Website Besucher aus (z.B. IP Adresse, Betriebssystem, Browser, …). Und ohne deine Erlaubnis ist das leider nicht erlaubt.

Wie können Google Fonts DSGVO-konform verwendet werden?

Die Lösung für das Problem liegt in der lokalen Einbindung deiner Google Fonts. Dabei werden die benötigten Schriftarten von deinem eigenen Server geladen.

Der einfachste und sicherste Weg, deine Google Fonts lokal einzubinden ist, diese von Google herunterzuladen und direkt auf deinem Server zu speichern. So wird überhaupt keine Verbindung zum Google Server aufgebaut und jeder Besucher deiner Webseite bekommt automatisch die richtige Schriftart angezeigt.

Anleitung: Google Fonts lokal einbinden

Wenn du den Pagebuilder Elementor verwendest und deine Google Fonts lokal einbinden möchtest, musst du zunächst einmal sicherstellen, dass du die Pro Version – also die kostenpflichtige Variante von Elementor – verwendest.

Falls du noch die kostenlose Variante verwendest, kannst du hier auf die Pro Variante upgraden*

Elementor Pro Pagebuilder kaufen!

Zum Elementor Pro Upgrade*

Schritt 1: Google Fonts herunterladen

Um deine Google Fonts lokal einzubinden, musst du diese zuerst einmal vom Google Server herunterladen. Gehe dazu auf den Google Fonts Helper und suche nach der gewünschten Schriftart.

Google Fonts Helper | Schrift downloaden

Schritt 2:  Google Font in weitere Dateiformate umwandeln:

Damit deine Schriftart wirklich in jedem gängigem Browser richtig angezeigt wird, brauchst du diese Dateiformate für deine Schrift:

  • WOFF
  • WOFF2
  • TTF
  • SVG
  • EOT

Meistens bekommst du nur ein Format wie das .TTF oder das .WOFF2 Format.

Falls dir auch Dateiformate fehlen, öffne die Seite https://transfonter.org/ und lade dort deine Schriftartdateien hoch („Add Fonts“). Setze die Häkchen bei allen benötigten Formaten und klicke im Anschluss auf „Convert“. Jetzt kannst du deine Font Dateien über den „Download“-Link herunterladen.

Schritt 3: Google Fonts im Elementor Pagebuilder installieren

Öffne jetzt das Backend deiner WordPress Website und klicke links auf „Elementor“ -> „Eigene Schriften“ oder „Custom Fonts“ (je nach Spracheinstellung).

Google Fonts in Elementor installieren

Füge eine neue Schriftart hinzu und trag den entsprechenden Namen deiner Schrift ein.

Lade deine Schriftart hoch und beachte hierbei, für jeden Schriftschnitt eine eigene Variante anzulegen:

Google Fonts für jeden Schriftschnitt hochladen.

Zum Schluss musst du nur noch auf „Veröffentlichen“ klicken.

Schritt 4: Google Fonts in Elementor deaktivieren

Jetzt musst du die Verknüpfung zum Google Server trennen. Dazu klickst du im Backend auf „Elementor“ -> „Einstellungen“. Von dort aus öffnest du den Reiter „Erweitert“. Hier setzt du die Option „Google Fonts“ auf „Deaktivieren

Google Fonts in Elementor deaktiveren

Schritt 5: Lokale Schriftart in deine Designs einsetzen

Zum Schluss muss deine lokal gehostete Google Schriftart jetzt noch in deine Designs eingearbeitet werden. Dazu öffnest du jede deiner gestalteten Seiten im Elementor Pagebuilder und klickst dich durch deine Textelemente. Über die Stileinstellungen wählst du deine lokale Schriftart aus.

Lokal eingebundene Google Fonts in Elementor verwenden

Jetzt kannst du deine lokal eingebundenen Schriftarten jederzeit und überall auf deiner Webseite verwenden, ohne dir dabei Gedanken über den Datenschutz zu machen.

Blog Themen

  • Erfolgreiches Online-Business aufbauen
  • Webdesign & Elementor Tipps
  • Sichtbarkeit & Reichweite aufbauen

Hey, ich bin Lori und ich zeige dir, wie du mit deiner Website deine Angebote verkaufst und dich langfristig unabhängig von Social Media machst.

Kennenlern Termin
Facebook Youtube Instagram

Du willst 2025 durchstarten und deine professionelle Website ganz einfach selbst erstellen?

Dann ist die Website Mastery genau richtig für dich!

Website Mastery

Gewinne 24/7 Kunden, während deine Konkurrenz noch Social Media Storys erstellt!

Plane und erstelle deine professionelle Business Website, ohne an der Technik oder ewig an der richtigen Strategie zu verzweifeln!

Zur Website Mastery

In der Website Mastery planst und erstellst du deine strategische Business Website, mit der du deine Besucher in Kunden vewandeltst und endlich stolz auf dein Business sein kannst!

Diese Beiträge könnten dir auch gefallen

Über-Mich Seite erstellen leicht gemacht: so zeigst du deine Persönlichkeit & Expertise

April 14, 2024 Keine Kommentare
Beitrag lesen »
Testkunden gewinnen für dein Coaching-Angebot

So bekommst du deine ersten Testkunden für dein Coaching-Angebot!

April 4, 2025 Keine Kommentare
Beitrag lesen »

So baust du in 5 Schritten deinen eigenen Social Media Kanal auf als Coach, Expertin oder Therapeutin

November 7, 2024 Keine Kommentare
Beitrag lesen »

Soulful BrandDesign

Meine Mission ist es, dass Expert*innen wie du mit ihrer authentischen und strategischen Website ihre Coaching-Angebote erfolgreich verkaufen.

PARTNER & AFFILIATES

LINKS FÜR DICH

  • Business-Magazin
  • Tool-Empfehlungen
  • Partnerprogramm

GET TOGETHER

Social Media

Facebook Instagram Pinterest Youtube

Newsletter abonnieren

Jetzt anmelden

Impressum | Datenschutz

Zustimmung verwalten
Um dir ein optimales Erlebnis zu bieten, verwenden wir Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wenn du diesen Technologien zustimmst, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn du deine Zustimmung nicht erteilst oder zurückziehst, können bestimmte Merkmale und Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen ansehen
{title} {title} {title}