Wer heute eine professionelle Website mit WordPress und Divi betreibt, kommt an zwei Themen nicht vorbei: Rechtssicherheit und Performance. Ein zentraler Punkt, der beides vereint, ist die Einbindung von Schriftarten. Lange Zeit war es Standard, Schriften einfach bequem über die Google-Server zu laden. Doch spätestens seit den massiven Abmahnwellen ist klar: Die Einbindung von Google Fonts über externe Server ist ohne ausdrückliche Einwilligung ein rechtliches Minenfeld. Sobald die IP-Adresse deiner Besucher ungefragt an Server in die USA übertragen wird, brennt die Hütte.
Doch die lokale Einbindung ist kein reines „Muss“ zur Schadensbegrenzung. Sie ist ein technischer Vorteil. Lokal gehostete Schriften eliminieren unnötige DNS-Abfragen und machen deine Seite spürbar schneller. In dieser ausführlichen Anleitung gehen wir tief in die Materie. Wir schauen uns an, wie du den Google-Hahn komplett zudrehst, warum der einfache Upload im Builder oft zu kurz greift und wie du mit der Profi-Lösung über das Child Theme und moderne CSS-Funktionen wie clamp() eine Typografie erschaffst, die auf jedem Endgerät perfekt aussieht.
Bevor wir anfangen, neue Schriften zu installieren, müssen wir Divi das Telefonieren abgewöhnen. Divi ist von Haus aus so eingestellt, dass es Hunderte von Google Fonts direkt von deren Servern zieht. Das ist zwar komfortabel, aber eben nicht DSGVO-konform.
Navigiere in deinem WordPress-Dashboard zu Divi > Theme-Optionen.
Gleich im Reiter Allgemein findest du die Option „Google Schriftarten verwenden“.
Stelle diesen Schalter konsequent auf Deaktiviert.
Sobald du speicherst, sollte deine Seite vor dem direkten Google Fonts Zugriff zu Google, durch Divi geschützt sein. Deine Website wird nun wahrscheinlich in einer Standard-Systemschrift (wie Arial oder Helvetica) angezeigt. Keine Sorge, das ändern wir jetzt.
Für kleinere Projekte oder wenn es besonders schnell gehen muss, bietet Divi eine integrierte Upload-Funktion. Das ist der einfachste Weg, um eine Schriftart lokal verfügbar zu machen, ohne dass du eine einzige Zeile Code schreiben musst.
Zuerst benötigst du die Schriftdateien. Gehe auf Google Fonts, suche dir deine Wunsch-Schrift aus (zum Beispiel „Oswald“) und lade das gesamte Paket herunter. Entpacke die ZIP-Datei auf deinem Rechner. Du suchst nach Dateien mit der Endung .ttf oder .otf.
Öffne nun eine Seite im Divi Builder und bearbeite ein beliebiges Text-Modul. Unter Design > Text > Schriftart findest du den Button „Hochladen“. Hier vergibst du einen Namen für die Schrift und wählst die entsprechende Datei aus.
Ein häufiges Problem: WordPress blockiert den Upload von Schriftdateien aus Sicherheitsgründen. Du erhältst dann die Fehlermeldung: „Dieser Dateityp ist aus Sicherheitsgründen nicht erlaubt“. Um das zu umgehen, musst du kurzzeitig unter die Haube von WordPress.
Verbinde dich per FTP mit deinem Server und öffne die Datei wp-config.php. Füge dort folgende Zeile ein:
define('ALLOW_UNFILTERED_UPLOADS', true);
Nachdem du die Schrift in Divi erfolgreich hochgeladen hast, solltest du diese Zeile aus Sicherheitsgründen unbedingt wieder aus der Datei löschen.
Obwohl der Upload im Builder charmant ist, hat er große Nachteile für die Wartbarkeit. Wenn du die Schriftart für deine gesamte Seite ändern willst, musst du sie theoretisch in jedem Modul-Typ (Text, Blurb, Kontaktformular, Slider) einzeln zuweisen. Zwar helfen die „Global Presets“ von Divi hier ein Stück weiter, aber es bleibt ein „Klick-Marathon“. Zudem sind die responsiven Einstellungen (Größe auf Handy vs. Desktop) starr. Hier setzen wir mit der Profi-Lösung an.
Wenn du Webdesign professionell angehst, willst du die volle Kontrolle. Die sauberste Art, Google Fonts lokal einzubinden, führt über das Child Theme. Hierbei trennen wir die Schrift-Definition von den Divi-Modulen und steuern alles zentral über Code.
Verwende statt der Roh-Dateien von Google den Google Webfonts Helper. Dieses Tool ist Gold wert.
Suche nach deiner Schrift (z. B. Oswald).
Wähle die Schriftschnitte aus, die du wirklich brauchst (z. B. 400 für Fließtext, 700 für Überschriften). Nimm nicht alle, das bläht die Ladezeit unnötig auf.
Wähle unter „Select platforms“ den Punkt „Modern Browsers“. Das liefert dir das .woff2-Format, welches die beste Komprimierung bietet.
Passe den Pfad bei „Folder prefix“ an. Wenn deine Schriften in einem Ordner namens fonts in deinem Child Theme liegen, sollte dort ../fonts/ stehen.
Verbinde dich per FTP mit deinem Server. Navigiere zu /wp-content/themes/dein-child-theme/. Erstelle dort einen neuen Ordner namens fonts und lade die heruntergeladenen WOFF2-Dateien hinein.
Profis nutzen SCSS, um ihren Code modular aufzubauen. Du kannst eine Datei namens _fonts.scss erstellen und dort den vom Webfont Helper generierten @font-face Code einfügen. Danach definierst du Variablen für deine Schriften. Das sieht dann etwa so aus:
| Variable | Beispiel-Wert | Beschreibung |
$font-main |
‚Oswald‘, sans-serif | Die primäre Schriftart für Fließtext. |
$font-header |
‚Oswald‘, sans-serif | Die Schriftart für alle Überschriften. |
In deinem Haupt-Stylesheet weist du diese Variablen dann global zu:
CSS
h1, h2, h4, h5, h6 {
font-family: $font-header;
}
body {
font-family: $font-main;
}
Tipp aus der Praxis: Die h3 lassen wir oft aus der globalen Header-Zuweisung raus. So kannst du sie als stilistisches Zwischenelement nutzen, das sich eher am Fließtext orientiert, aber dennoch eine Hierarchiestufe darstellt.
clamp()Das ist der Punkt, an dem wir Divi technologisch hinter uns lassen. Normalerweise stellst du in Divi eine Schriftgröße für Desktop ein (z. B. 90px) und eine für das Smartphone (z. B. 40px). Dazwischen passiert nichts – die Schrift springt bei einem bestimmten Breakpoint einfach hart um. Das sieht auf Tablets oder sehr großen Smartphones oft unproportioniert aus.
Die Lösung ist die CSS-Funktion clamp(). Sie ermöglicht es, dass die Schriftgröße stufenlos und linear mit der Breite des Browserfensters mitwächst oder schrumpft.
clamp()Die Funktion benötigt drei Werte:
Minimum: Die kleinste Schriftgröße (für das kleinste Smartphone).
Idealwert: Ein variabler Wert, meist in vw (Viewport Width), der die Skalierung berechnet.
Maximum: Die größte Schriftgröße (für den Desktop).
Stellen wir uns vor, deine H1 soll auf einem 360px breiten Smartphone 50px groß sein und auf einem 980px breiten Desktop (der Standard-Breakpoint von Divi) 90px. Da modernes CSS auf rem basiert (wobei 1rem meist 16px entspricht), müssen wir umrechnen:
90px = 5.625rem
50px = 3.125rem
Mithilfe eines Fluid Typography Calculators (den du online leicht findest) ermittelst du den Idealwert. Die finale Zeile in deinem Child-Theme-Stylesheet sieht dann so aus:
CSS
h1 {
font-size: calc(clamp(3.125rem, 5vw + 1rem, 5.625rem)) !important;
}
Wichtig: Wir packen das Ganze in ein calc() und nutzen !important, um sicherzustellen, dass die starren Einstellungen aus dem Divi Builder überschrieben werden.
Mit dieser Methode musst du nie wieder in jedes einzelne Modul gehen und schauen, ob die Überschrift auf dem iPhone 13 Pro Max vielleicht doch eine Zeile zu lang ist. Die Schrift passt sich jedem Pixel an. Das Ergebnis ist eine absolut harmonische Typografie, egal ob der Besucher auf einem Smart-Kühlschrank oder einem 4K-Monitor surft.
Google Fonts lokal in Divi einzubinden ist weit mehr als eine Fleißaufgabe für Datenschützer. Es ist der Weg zu einer technisch sauberen und performanten Website.
Während Methode 1 für absolute Anfänger oder kleine Landingpages ausreicht, ist Methode 2 der Goldstandard für jeden Webdesigner. Durch die zentrale Verwaltung im Child Theme sparst du dir bei späteren Designänderungen Stunden an Arbeit. Die Kombination aus lokaler Speicherung und der dynamischen Skalierung via clamp() sorgt dafür, dass deine Website nicht nur rechtssicher ist, sondern auch technisch in der obersten Liga spielt. Es ist ein einmaliger Einrichtungsaufwand, der die Qualität deiner Divi-Projekte nachhaltig steigert.
Loading...
0 Kommentare