Schriftarten, die von deinem WordPress Theme angeboten werden, werden standardmäßig über Google Fonts geladen. Kommt nun ein Besucher auf deine Website, gelangen durch dieses Laden der Schriftarten personenbezogene Daten an Google. Das ist natürlich nicht DSGVO-konform. Aus diesem Grund müssen wir die Schriftarten lokal einbinden. Mit Page Buildern wie Divi, Elementor und Thrive Architect geht das mittlerweile ganz einfach und ohne Programmierkenntnisse.
Im 1. Schritt zeige ich dir, wie du die Schriftart überhaupt herunterladen kannst, wenn es sich um Google Fonts handelt. Selbstverständlich kannst du aber auch eigene, gekaufte Schriftarten lokal einbinden. Nutze dazu die .ttf Datei der Schriftart.
Google Fonts herunterladen
Gehe auf fonts.google.com und suche nach der Schriftart, die du einbinden möchtest. Wenn du noch auf der Suche nach einer geeigneten Schriftart bist, kannst du in Google Fonts auch nach Serif, Non-Serif und Handwritten Schriftarten filtern, um die für dich passende zu finden. Ich empfehle dir Serifen- und “Handwritten”-Schriftarten aber nur für die Überschriften zu nutzen. Für den Fließtext ist es wichtig, dass dieser gut lesbar ist und das ist am besten mit einer Serif-Schriftart.
Schriftarten lokal einbinden mit Divi
Im 1. Schritt schalten wir die Google Fonts in Divi aus. Gehe dazu in deinem WordPress Backend auf Divi – Theme-Optionen. Scrolle ein bisschen nach unten und deaktiviere “Google-Schriftarten verwenden”.
Erstelle eine neue Seite und gehe in den Front-End-Builder von Divi. Füge ein neues Text-Element hinzu und gehe in den Reiter Design und dann in den Abschnitt Text. Klicke auf das Feld Text Schriftart. Hier siehst du nun den Button “Hochladen”.
Sorry, This File Type Is Not Permitted for Security Reasons?
Es kann nun passieren, dass du die Fehlermeldung “Sorry, This File Type Is Not Permitted for Security Reasons” erhältst. Das ist kein Drama. Aus Sicherheitsgründen – damit keine Dateien hochgeladen werden, die deine Seite schädigen oder ganz kaputt machen – können nur bestimmte Datei-Formate hochgeladen werden.
Um dies zu lösen, musst du dich in deinen Hoster einloggen und nach der wp-config.php-Datei deiner Website suchen. Ich erkläre den Weg dorthin mal anhand von dem Hoster all-inkl. Wenn du einen anderen Hoster hast, kannst du den Ort der Datei anhand der Beschreibung sicher trotzdem finden. Wenn nicht, melde dich gerne bei mir.
Nachdem du dich über den Kundenlogin von all-inkl eingeloggt hast, gehst du in die technische Verwaltung und loggst dich dort ein. Suche in der Menü-Leiste links nach FTP. Ein Hauptbenutzer ist bereits angelegt. Gehe in die Spalte Aktion und klicke auf das Computer-Symbol, um ins WebFTP zu gelangen. Gehe in das Verzeichnis deiner Website und suche nach der Datei wp-config.php. Klicke auf das letzte Symbol der Zeile – Datei bearbeiten.
define('ALLOW_UNFILTERED_UPLOADS', true);
Speichere die Datei und gehe zurück zu Divi. Lade deine Schriftart wie oben beschrieben hoch. Wenn du alle gewünschten Schriftarten eingebunden hast, nimm diese Code-Zeile am besten wieder aus der wp-config.php heraus, um die Sicherheit beizubehalten und die Uploads erneut nur für bestimmte Dateitypen zu erlauben.
Wenn dein Hoster kein WebFTP hat, nutze am besten das Tool FileZilla. Die Daten zum Einloggen in den FTP-Server bekommst du von deinem Hoster. Suche, wenn du drin bist, genauso nach der wp-config.php-Datei. Lade sie herunter, öffne sie mit einem Code-Editor – z. B. BBEdit. Füge die oben genannte Code-Zeile unten ein, speichere und lade die Datei wieder hoch.
Wie du letztendlich kontrollierst, ob du die Schriftarten lokal richtig eingebunden hast, erkläre ich noch am Ende des Artikels.
Schriftarten lokal einbinden mit Elementor
Um im Elementor-Builder eigene Schriften hochladen zu können, benötigst du Elementor Pro (grundsätzlich geht es natürlich auch so – aber um diesem einfachen Weg zu folgen, benötigst du die Pro-Version).
Im WordPress-Backend im Menüpunkt Elementor findest du dann den Punkt “benutzerdefinierte Schriftarten” bzw. “Custom Fonts”. Klicke oben auf “Hinzufügen”. Gib deiner Schriftart einen Namen und klicke auf “Schriftartvariante hinzufügen”. Suche nun die entsprechenden Dateien deiner Schriftart heraus und klicke entsprechend auf “Hochladen”.
Schriftarten lokal einbinden mit Thrive Architect
Um deine eigenen Schriftarten im Thrive Architect zu nutzen, benötigst du das Plugin Custom Fonts. Installiere und aktiviere zunächst das Plugin.
Gehe dann im Backend Menü zu Design – Custom Fonts. Wähle einen neuen Namen für deine Schriftart und lade die entsprechenden Dateien hoch. Klicke auf “Add Font” und schon kannst du die Schriftart in deinem Page Builder auswählen und nutzen.
Kontrolle: Wie kann ich überprüfen, ob die Schriftarten lokal geladen werden?
Wenn du nun die lokalen Schriften hochgeladen und in deinen Texten ausgewählt hast, kannst du noch einmal überprüfen, ob alles funktioniert hat.
Besuche dazu deine Website im Chrome Browser, klicke rechts und öffne “Untersuchen”. Klicke nun auf den Reiter Sources. Wenn du hier siehst, dass etwas von fonts.googleapis.com geladen wird, dann werden noch an einer oder mehreren Stellen auf deiner Seite Google Fonts geladen, und du musst dich nochmal auf Detektivsuche begeben und deine Texte durchschauen, um die Stelle zu finden, an denen ggf. noch Google Fonts geladen werden.
Hast du noch Fragen zum Thema? Hat etwas nicht geklappt? Dann schreibe mir sehr gerne in den Kommentaren.
Hi,
welchen Trick gibt es denn noch, wenn ich auch nach dem Eintrag define(‚ALLOW_UNFILTERED_UPLOADS‘, true); in der wp-config.php noch die Fehlermeldung mit dem Dateityp bekomme?
Viele Grüße
Chris
Hallo Stefka, wie mache ich das mit der kostenlosen Elementor-Version? Was hältst du von dem Plugin OMGF?
LG Christine
Hallo Christine, ich benutze dann immer das Plugin Custom Fonts, um Schriften in Elementor ohne Pro hochzuladen, das funktioniert dann genauso wie in Elementor Pro im Prinzip.
Schau mal, ob du vielleicht das falsche ‚ verwendet hast – das habe ich schon öfter gesehen. Nutze das, was du auf der deutschen Tastatur neben dem ä findest und achte darauf, dass eben beide ‚ oben angezeigt werden und nicht unten wie jetzt in deinem Kommentar.
Außerdem muss der Code nach dem
Wow Stefka, vielen Dank. Das macht mich jetzt richtig glücklich, dass das so unkompliziert geht!
hihi das freut mich 🙂
Das war wirklich super simpel, wenn man die Datei einmal gefunden hat wo man es rein schreibt. DANKE! 🙂
Das freut mich sehr 🤩
Hallo,
habe das Plugin „Customer Fonts“ nach Abweisung installiert und auch die Schrift hochgeladen. Leider übernimmt es meine ausgewählte Schrift nicht. Die Schriftart ändert sich nicht, egal was für eine Font ich hochladen. Hast du noch eine Idee?
Hast du Schriftart nur hochgeladen oder hinterher auch als Schriftart ausgewählt, da wo du sie benutzen möchtest? Schick mir sonst gerne auch eine Mail mit deiner Website-URL, wenn du sie hier nicht teilen möchtest.
Hi, ich hab das selbe Problem wie Conny. Ich hab die Schrift auch über Custom Fonts hochgeladen, sie wird mir im Elementor auch angezeigt aber wenn ich sie auswähle passiert nichts. Es bleibt immer die selbe Schrift egal, welche Schriftart ich extern hochlade.
Würde mich sehr freuen wenn du mir helfen könntest.
Hallo Sarah, was für eine Schrift nutzt du? Falls es eine gekuafte Schriftart ist, hast du die Webfont gekauft?
Ich benutze Avenir Next Regular. Ja ich habe sie über myfonts gekauft. Im Elementor verwende ich das Theme oceanWP.
Ist deine Website denn schon online? Schau gerne mal, ob dir diese Tipps helfen: https://elementor.com/help/custom-fonts-not-displaying-on-front-end/
Hallo Stefka, vielen Dank für deinen tollen Artikel. Ich habe alles genau so gemacht, wie oben beschrieben. Solang ich mich im Divi Builder befinde, zeigt es mir auch alles richtig an. Sobald ich meine Website aber über den Browser oder auf dem Handy aufrufe, erscheint eine ganz andere Schriftart. Weißt du woran das liegen könnte?
Viele Grüße Lisa
Du hast sicher schon das Performance Update gemacht (Version 4.10.) oder? Wenn ja, geh mal im Backend zu Divi – Theme Optionen Reiter Performance und schalte das kritische CSS aus. Wenn es dann immer noch nicht geht, meld dich gern bei mir.
Hallo zusammen,
ich möchte auch die Avenir benutzen und dachte, diese wäre gratis zu haben? Habe ich mich verhört? Auch nutze ich thrive, ist da der Prozess ähnlich zu elementor?
Liebe Grüße!
Oftmals sind Schriften für den individuellen, privaten Gebrauch kostenlos. Sobald du sie aber im Business-Kontext nutzt, musst du sie kaufen. Du kannst dazu einfach deine Schrift zusammen mit commercial use googeln. Für eine Website benötigst du eine Webfont, damit diese ordentlich angezeigt wird.
Hallo Stefka,
ich habe das gleiche Problem wie Lisa. Habe jetzt schon das kritische CSS ausgeschaltet, jedoch funktioniert es immer noch nicht. Die Schriften habe ich alle nach deiner Anleitung hochgeladen – Im Pagebuilder funktioniert auch alles, in der Vorschau jedoch nicht mehr 🙁 Hast du noch einen Tipp? Vielen Dank Yvonne
Liebe Stefka,
vielen Dank für den sehr informativen und hilfreichen Beitrag. Nach deiner Anleitung konnte ich die gewünschte Schrift in DIVI einfügen. Du hast mir damit sehr geholfen.
Viele liebe Grüße von Sandra
Hallo Sandra, das freut mich sehr 🙂 Danke, dass du dir die Zeit genommen und einen Kommentar da gelassen hast
Super Anleitung, hat alles geklappt. So kann man arbeiten.
Das freut mich sehr!
Danke Stefka für die tolle Erklärung!!!
Mir hat auch noch dieses Video für Divi geholfen: https://www.youtube.com/watch?v=5BnuQnltcs4 🙂
Hallo,
vielen Dank ersteinmal, dass es solche super Tutorials gibt. DAUMEN HOCH!
Hast du vielleicht schon Erfahrungen mit Strato gemacht? Also wie man in DIVI Schriften hineinladen kann, wenn die Seite auf einem Strato Server liegt?
Habe bei Strato einen FTP Zugang erstellt und auch die wp-config gefunden und deinen Code eingefügt. Leider funktioniert das nicht. Es erscheint immer „Du bist leider nicht berechtigt…..“
Muss bei Strato noch was eingestellt werden?
Bei AllInkl hat das supe rmit deiner Anleitung geklappt.
Vielen lieben Dank
Hallo Stevka, vielen Dank für diese ausführliche Beschreibung. Muss ich nach dem deaktivieren der Google Schriften in Divi Standardschriften, wie Verdana, Montserrat und co. trotzdem nochmal neu uploaden?
Hallo Katja! Es gibt System-Schriften, die musst du nicht hochladen. Wenn du die Google Schriftarten ausschaltest, sind das die, die dir im Divi Builder noch angezeigt werden. Verdana gehört dazu, Montserrat gehört nicht dazu, das müsstest du separat hochladen.
Hey liebe Stefka,
erstmal vielen Dank für die Anleitung 🙂 Ich hab im Divi Builder die Fonts direkt gesehen, aber sobald ich den Builder geschlossen habe, wurden die Fonts in Arial angezeigt. Ich habe sie sowohl im Customizer als Defaults als auch direkt bei den einzelnen Modulen einzeln eingestellt. Nichts hat geholfen. Kennst du das Problem zufällig? Freue mich auf eine Antwort und danke im Voraus 🙂
Liebe Grüße
Mona
Es kann sein, dass du dein SSL-Zertifikat nicht richtig eingerichtet hast und Teile der Seite über http und nicht https geladen wird und die Schrift darum nicht angezeigt wird. Installiere einmal das Plugin Better Search Replace und schreibe deine Domain unter „Suchen nach“ mit http und bei „Ersetzen mit“ mit https. Mach vorher ein Backup und ich drück die Daumen, dass es danach funktioniert. Danach musst du evt. noch den Cache löschen, damit du alles ordentlich siehst und Better Search Replace kannst du im Anschluss wieder entfernen.