Google Fonts lokal (Divi)

Google Fonts bei Divi deaktivieren oder lokal hosten

Google Fonts werden heutzutage auf nahezu allen modernen Websites verwendet. In Bezug des Datenschutzes sind sie jedoch umstritten, da sie eine „Verbindung zu den Google-Servern herstellen“ und dadurch auch Daten übertragen können.

Daher werden folgende 4 Szenarien empfohlen:

  1. Google Fonts in der Datenschutzerklärung erwähnen (umstritten, ob dies genügt. CH eher Ja. EU eher nein.)
  2. via Cookie Plugin Einwilligung einholen und zusätzliche in der Datenschutzerklärung erwähnen
  3. Google Fonts zu entfernen und nur Standardschriftarten zu verwenden
  4. Google Fonts auf dem eigenen Server hosten

Die 3. und 4. Möglichkeiten werden derzeit als die sichersten Methoden angesehen, welche glücklicherweise mit dem Divi Theme* sehr einfach und schnell umgesetzt werden können.

Google Fonts deaktivieren

  • Gehe zu Divi – Themes-Optionen
  • Im ersten Register „General“ findest du die zwei Optionen bezüglich Google Fonts, welche du deaktivieren musst.
  • Speichern
Google Fonts bei Divi deaktivieren

Dies ist tatsächlich schon alles. Nun findest du z.B. im Textmodul auch nur noch die Standardschriften.

standardschriften

Google Fonts auf dem eigenen Server hosten / Google Fonts lokal einbinden

Im Vergleich zu anderen Themes, ist auch dies bei Divi* sehr einfach.

  • Deaktiviere Google Fonts wie oben beschrieben
  • Nun öffne die Website von Google Fonts https://fonts.google.com/
  • Such deine gewünschte Google Schrift und klicke diese an.
  • Nun kannst du diese oben rechts downloaden „Download Family“
  • Entpacke die komprimierte ZIP-Datei, sodass du die Schriften in einem Ordner findest.
  • Nun folgt der einzig komplizierte Teil. Da das Hochladen von gewissen Dateien bei Divi / WordPress gesperrt ist, musst du diese Funktion zuerst freischalten.
    Dies geht via wp-config.php Datei in deiner WordPress Installation. Öffne diese und füge ganz am Ende folgenden Code ein:
define('ALLOW_UNFILTERED_UPLOADS', true);
  • Gehe zurück zu deiner WordPress Seite und öffne den Divi Builder und wähle ein Textmodul. Einfach eine Seite oder einen Beitrag öffnen. Dabei spielt es keine Rolle ob du im Backend mit dem Divi Builder oder im Frontend mit dem visuellen Builder arbeitest.
  • Hier im Beispiel siehst du den Divi Builder im Backend. Gehe im Textmodul auf Design und dann z.B. auf Text Schriftart. Es spielt wirklich keine Rolle wo du dies machst, es geht nur um die Auswahl einer Schriftart direkt im Divi Builder.
Textmodul
  • Sobald du nun eine Schriftart auswählen möchtest, siehst du neben den Standardschriften auch einen Button „Hochladen“
Hochladen
  • Klicke auf Hochladen
  • Beim Feld Font Name (1) schreibst du den Namen der Schriftart.
  • Auf den Button Choose Font Files (2) klicken und auf deinem Computer die vorher runtergeladene Schrift auswählen.
  • Nun auf Hochladen (3) klicken
  • Zum Schluss entfernte in der wp-config.php Datei den Eintrag define(‚ALLOW_UNFILTERED_UPLOADS‘, true); wieder
Hochladen

Das war’s bereits. Wenn du nun irgendwo bei Divi* eine Schriftart auswählen kannst, dann kannst du nun auch diese „hochgeladene“ Schrift auswählen und verwenden.

Kleiner Hinweis: Bei Divi – Designmodifikator kannst du die hochgeladene Schrift auch auswählen, aber oftmals wird diese in der Vorschau nicht richtig angezeigt. Funktionieren tut es aber.

Viel Spass mit Divi und deiner WordPress Seite…

… und denk daran, bleib natürlich auch online!

Lieber Gruss

Karin

Erstelle in 4 Wochen deine eigene Business-Website

Zögerst du schon lange, um endlich deine neue Website zu erstellen?

Oder weisst du einfach nicht, wie und womit du beginnen sollst?

In diesem Kurs führe ich dich Schritt für Schritt zu einer Website, die perfekt zu dir, deinem Angebot und deinen Kunden passt.

Nächster Start: 8. Juli 2024

Business Starter Website

Affiliate/Werbelinks

In meinem Artikel verwende ich Affiliate-Links. Wenn du auf einen solchen Link klickst und darüber einen Kauf tätigst, erhalte ich eine Provision vom Anbieter. Für dich ändert sich dadurch weder das Angebot noch der Preis. Damit unterstützt du meine Arbeit bei der Erstellung kostenloser Anleitungen und Blogartikel.

10 Kommentare

  1. Danke, das hat mir sehr weitergeholfen!

    Zuerst hatte es nicht geklappt, weil der Eintrag für die wp-config.php mit „deutschen“ Anführungszeichen geschrieben war. Ich habe es in englische geändert, dann klappte es:

    define( ‚ALLOW_UNFILTERED_UPLOADS‘, true);

    Antworten
    • Danke Christian für diesen Hinweis. Da hat sich wieder etwas verschoben. Nun sollte es aber richtig sein. LG Karin

  2. Das wäre wunderbar, wenn es funktionieren würde. Leider habe ich das gleiche Problem wie Günter. Der Trick mit dem Eintrag in der wp-config.php funktioniert leider nicht. Hast du vielleicht noch ein Tipp?

    PHP 7..3
    DIVI 4.6.5
    WP 5.5.1

    Antworten
    • Hallo Tilo

      Erscheint beim Upload eine Fehlermeldung?

      Lieber Gruss
      Karin

  3. Danke dir. Auch nach fast zwei Jahren hat mir das sehr geholfen. 😉 So muss ich nicht auf ein kostenpflichtiges Plugin zurück greifen.

    Antworten
  4. Danke für den hilfreichen Beitrag Karin!

    Das hat bei mir in der Vergangenheit auch schon mal geklappt, aber mit aktuellen Divi und aktuellem WordPress klappt das nicht mehr so. (Jetzt bei 3 verschiedenen Installationen getestet).

    Problem: Ich kann den Knopf „Choose Font Files“ nicht mehr drücken! Erst wenn ich auf die Zeile drunter „Supported file formats…“ klicken kann ich eine Datei hochladen. ABER: Dann auch nur noch TTF und OTF kein WOFF oder WOFF2.

    Divi-Version: 3.29.3
    WordPress 5.2.3

    Ist das bei dir auch so? Dann mache ich mal beim Hersteller ein Support-Ticket auf…

    Viele Grüße,

    Günther

    Antworten
    • Hallo Günther
      Danke für Deinen Kommentar.
      Meist liegt dieses Problem an der PHP Version. Daher diese mal kurzfristig ändern und dann nochmals testen. Alternativ kannst Du bei der wp-config.php Datei vorübergehend folgenden Code hinterlegen:

      define(‚ALLOW_UNFILTERED_UPLOADS‘, true);

      nach dem Upload der Schriftarten einfach den Code aus Sicherheitsgründen wieder entfernen.

      Lieber Gruss
      Karin

  5. Mein erster Kommentar liest sich wie Link-Fischerei … So war das aber nicht gemeint.

    Ich versuche grade in einer Testumgebung, meine Website moderner zu gestalten und probiere zum ersten Mal Divi aus. Und bei vielen dieser komplexen Themes mit Pagebuildern und Pipapo finde ich es extrem kompliziert auf selbstgehostete Schriften umzustellen, wenn es mir denn überhaupt gelingt.
    Deine Anleitung ist erstens super Verständlich und zweitens haben offenbar die Divi-Entwickler*innen mitgedacht. Und eine tolle Lösung entwickelt.

    Antworten
    • Danke Dir Anina! Freut mich sehr, dass ich Dir weiterhelfen konnte. Lieber Gruss Karin

  6. Das ist genial erklärt! Genau das habe ich gerade gesucht. Lieben Dank für die super Erklärung.

    Antworten

Einen Kommentar abschicken

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

Vielleicht interessiert dich auch…

PrivacyBee Anleitung (WordPress + Divi)

PrivacyBee Anleitung (WordPress + Divi)

PrivacyBee bietet in meinen Augen eine einfache und sympathische Möglichkeit, eine Datenschutzerklärung für das neue Schweizer Datenschutzgesetz zu erstellen. Gerne stelle ich dir hier eine Anleitung zur Verfügung, wie du die Datenschutzerklärung erstellen und in...

Bilder pixelgenau zuschneiden

Bilder pixelgenau zuschneiden

Wohl jeder, der an einer Website arbeitet, steht früher oder später vor dem Problem "wie schneide ich ein Bild/Foto pixelgenau zu". Damit dies auch einfach und schnell geht, empfehle ich jeweils Adobe Photoshop (Elements) oder den kostenlosen Online Dienst Pixlr...

Terminbuchung: Meine 3 besten Empfehlungen 2023

Terminbuchung: Meine 3 besten Empfehlungen 2023

Auf immer mehr Websiten werden online Terminbuchungen angeboten. Lange suchte ich nach überzeugende Lösungen. Meine 3 Favoriten stelle ich Dir hier gerne vor.Amelia Wirklich lange suchte ich nach einer passenden Lösung. Amelia hat mich direkt überzeugt. WordPress...

Newsletter Software: Meine 3 besten Empfehlungen 2023

Newsletter Software: Meine 3 besten Empfehlungen 2023

E-Mail-Marketing ist eine sehr gute und effektive Methode um interessierte Personen zu informieren. Dabei gibt es unzählige Newsletter Anbieter und auch WordPress Plugins für den Versand von Newslettern. Hier den richtigen Anbieter zu finden kann sehr zeitaufwändig...

WP Rocket – Macht Deine WordPress Seite schneller

WP Rocket – Macht Deine WordPress Seite schneller

WP Rocket ist wohl das einfachste und beste Cache Plugin für Deine WordPress Website. Nichts nervt mehr als ewig laaaaaangsam ladende Websiten. Dies ist schlecht für Deine Websitenbesucher, für Dein Google Ranking und deshalb auch für Dein Portemonnaie. Die...

WordPress: Änderungen rückgängig machen / Revisionen verwenden

WordPress: Änderungen rückgängig machen / Revisionen verwenden

Du kennst sicher folgendes Problem: Du änderst eine Inhaltsseite und einen Tag später bemerkst Du, dass die alte Version besser gewesen wäre. Oder Du bearbeitest einen Beitrag, speicherst und aus unerklärlichen Gründen ist der Inhalt verschoben, verändert oder ganz...