Divi: Schriftarten lokal einbinden

von | Divi

Wieso sollte ich Schriftarten im Web lokal hosten?

Die DSGVO, welche am 25. Mai 2018 in Kraft getreten ist, soll den Datenschutz für Verbraucher verbessern und unter anderem das unnötige Erfassen von personenbezogenen Daten verhindern. Die Umsetzung entsprechender Maßnahmen ist für Unternehmen nicht immer einfach. Vor allem, wenn es um das Thema Webdesign geht.

Eine der kritischen Stellen einer Website im Bezug auf die DSGVO sind die Google Fonts. Google stellt uns ein riesiges Archiv an Schriftarten (Fonts) komplett kostenfrei zur Verfügung. Über eine API-Schnittstelle rufen die meisten Page-Builder, wie z.B: das Divi-Theme die gewünschte Schriftart direkt von einem Google Server ab, sobald die Seite geladen wird. Für uns als Websitebetreiber hatte das bisher den Vorteil, dass wir die Fonts nicht selbst einbinden mussten und trotzdem aus mehreren hundert Schriftarten frei wählen konnten. Eine tolle Sache, oder? Leider macht uns die DSGVO einen Strich durch die Rechnung. Denn Google schenkt uns die Schriften natürlich nicht aus purer Gutherzigkeit. Jedes Mal, wenn jemand unsere Seite aufruft und die entsprechenden Schriften vom Google-Server geladen werden, wird die IP-Adresse des Nutzers an Google übertragen. Vermutlich, um Nutzer noch besser tracken zu können und die Suchmaschine somit noch besser zu machen.

Da eine IP-Adresse jedoch zu den personenbezogenen Daten gehört, müssten wir, bevor die Seite geladen wird erst einmal die Einwilligung des Nutzers für die Verbindung zu den Google Fonts einholen, um die Schriftarten dann zu laden. Bis diese Einwilligung erfolgt wäre, würde unsere Seite mit einer der Standard-Schriften angezeigt werden und das sieht in aller Regel alles andere, als schön aus. Die beste Lösung ist also, wenn wir die Fonts einfach selbst auf unserem Webserver einbinden. Dann wird keine Verbindung zu den Google Servern hergestellt und wir können dieses Problem elegant umgehen.

Das Problem mit der lokalen Einbettung einer Schriftart in Divi

Mit etwas php-Code und einem sehr umständlichen Umweg ist es in Divi bisher möglich, eigene Fonts hochzuladen und zu nutzen. Allerdings werden diese dann je nach Browser komplett unterschiedlich dargestellt (und damit meine ich wirklich absolut abweichend vom Original und nichtmehr wiederzuerkennen). Ich nutze daher eine andere Methode, um eigene Schriftarten in Divi zu nutzen. Diese funktioniert absolut zuverlässig und erfordert nur etwas CSS-Code. Diese Methode werde ich Dir nun zeigen.

Schriftarten in Divi lokal einbinden

1. Google Fonts deaktivieren

Als erstes deaktivierst Du die Verbindung zu den Google-Fonts in den Einstellungen des Divi-Themes. Gehe dafür in WordPress unter Divi/Theme-Optionen und lege den Schalter bei Google-Schriftarten verwenden um, sodass er ausgegraut angezeigt wird (ja, die Übersetzung in Divi kann hier etwas verwirrend sein).

2. Schriftart aussuchen

Vielleicht hast Du bereits eine Schriftart, die Du benutzen möchtest (wichtig: Du brauchst die Schriftart als Webfont in den Formaten .eot/ .woff/ .woff2/ .svg/ .ttf). Oder aber Du bist noch auf der Suche nach einer passenden Schriftart. Falls das der Fall ist, kann ich Dir https://fonts.google.com/ empfehlen. Dort kannst Du aus einer riesigen Auswahl an kostenfreien Schriftarten die passende auswählen. Lade die Schriftart aber nicht herunter, sondern merke Dir nur den Namen und das Schriftgewicht (z.B. regular, 400, 700,…).

3. Webfontshelper Schriftart runterladen

Als nächsten besorgen wir uns die Webfont-Variante(n) unserer Schriftart und lassen uns einen Code generieren, den wir in unsere CSS-Datei einfügen. Besuche also die Website https://google-webfonts-helper.herokuapp.com/fonts und suche nach der Schriftart, welche Du Dir eben ausgesucht hast. Kreuze dann die Häkchen bei den Schriftgewichten an, die Du benötigst. Gebe anschließend unter „Customize folder prefix (optional):“ den Pfad an, wo später in Deiner WordPress-Installation die Schriftarten abgelegt sein werden. Du kannst hier „/wp-content/webfonts/“ eintragen, weil meiner Erfahrung nach sowieso kein anderer Pfad funktioniert. Anschließend kannst Du die Schriftart auf dem blauen Button herunterladen und entpacken. Schließe die Website aber noch nicht, denn nachher kopieren wir uns noch den Code heraus.

4. Font in WordPress hochladen

Gehe nun per FTP-Zugang auf Deinen Server und lade in den Ordner „/wp-content/webfonts/“ Deine Schriftart in den Formaten „.eot“ „.woff“ „.woff2“ „.svg“ und „.ttf“ hoch. Sollte der Ordner „webfonts“ noch nicht existieren, dann erstelle einen neuen mit genau diesem Namen.

5. Webfontshelper: Code kopieren

Kopiere nun den Code vom Google Webfonts Helper (von der Seite, die Du noch nicht schließen solltest) und füge ihn in Deine style.css-Datei ein. Diese findest Du unter „wp-content/themes“ im Ordner Deines Themes. Idealerweise nutzt Du ein Child-Theme und die darin enthaltene CSS-Datei, um bei einem Update nicht alle Anpassungen zu verlieren. Solltest Du noch kein Childtheme besitzen, dann ist hier meine Anleitung dafür.
Nun haben wir die Schriftart lokal eingebunden. Sie muss nur noch zugewiesen werden (welche Elemente sollen diese Schriftart nutzen, z.B. Fließtext, Überschriften). Standardmäßig willst Du auf jeden Fall den Fließtext und die Überschriften deklarieren. Das würde dann so aussehen (füge den Code einfach unter dem @fontface-Code von eben ein):

body { font-family: 'Poppins', Helvetica, sans-serif; src: url( “ /wp-content/webfonts/poppins-v15-latin-regular.ttf” ); }h1, h2, h3 { font-family: 'Poppins', Georgia, serif; font-weight: 700; }

Ersetze in diesem Code den Schriftnamen und den Pfad durch Deine eigenen Angaben!

Fazit

Mit etwas CSS ist es möglich, Schriftarten lokal in Divi einzubetten. Ein weiterer Vorteil dieser Methode ist, dass für Fließtext und Überschriften bereits standardmäßig die korrekte Schriftart in Divi eingestellt ist. Wundere Dich also nicht, dass Du innerhalb des Pagebuilders im Drop-down-Menü von Divi die nun eingebundene Schriftart nicht extra auswählen kannst.

PS: Willst Du mehrere Varianten Deiner Schriftart, z.B. fett, kursiv, etc. nutzen, musst Du diese extra einbinden (jeder Schriftschnitt hat je eine eigene Schriftdatei in den Formaten „.eot“ „.woff“ „.woff2“ „.svg“ und „.ttf“ )

Ein gut aussehender junger Mann auf einem schwarz-weißen Foto

Dennis Petschik

Autor
Nach fast 10 Jahren in der Branche möchte ich mein Wissen zum Thema Marketing & Webdesign auf diesem Blog teilen. Ich wünsche Dir viel Spaß beim Lesen meiner Beiträge und noch mehr Spaß bei der Umsetzung!

Bild des blauen Buchcovers in 3D

Kostenfreies E-Book!

Generiert Deine Website regelmäßig neue Kundenanfragen für Dich?
Falls nicht, steht hier Deine kostenfreie Praxisanleitung zum Download bereit!
In meinem E-Book zeige ich Dir, wie Du durch reine Psychologie mehr Kundenanfragen erhältst!