So verwendest Du Google Fonts datenschutzkonform mit Elementor
Google Fonts zu verwenden hat ja in der Vergangenheit dazu geführt, dass man abgemahnt werden konnte, weil die Verwendung nicht datenschutzkonform ist.
Heute zeige ich mal, wie man Google Fonts mit Elementor verwenden kann, ohne Probleme mit dem Datenschutz zu bekommen. Diese Anleitung bezieht sich ausschließlich nur auf Elementor innerhalb von WordPress. Ein weiteres Plug-in ist nicht nötig.
Während unserer Layoutphase sollten wir erstmal ganz normal die Google Fonts aus Elementor verwenden. So haben wir besser die Möglichkeit, uns unsere Schriften passend zum Layout auszuwählen, weil sie ja alle in Elementor zur Verfügung stehen. Bis hierhin ist erstmal alles ganz normal. Haben wir uns am Ende für unsere Schriften entschieden und der Kunde ist auch zufrieden mit der Schriftauswahl, können wir zu Google Fonts auf die Webseite gehen und laden uns dort unsere entsprechenden Fonts für unser Webdesign herunter.
In diesem Beispiel verwende ich die Schrift „Poppins“. Es funktioniert aber mit allen andern Fonts genauso. Wir gehen also auf die Webseite und wählen unseren Font. Auf der Font-Seite finden wir oben rechts einen Download-Button. Hier laden wir uns die Schriftfamilie einmal herunter.
Wir entpacken das ZIP-Archiv und dann haben wir unsere Schrift in allen Schriftschnitten im .otf Format zur Verfügung. OTF steht für Open Type Font, es kann auch vorkommen, dass das Schriftformat in .ttf vorliegt. TTF steht für True Type Font, bei der Poppins ist es aber .otf.
Um die Schriften jetzt in Elementor zu verwenden brauchen wir unsere Schriften in zwei unterschiedlichen Formaten. Einmal als .woff und einmal als .ttf File. Um diese Font-Formate zu bekommen, benutzen wir einen Converter. Z.B. diesen https://convertio.co/de/otf-woff/ es gibt aber auch noch andere.
Mit den Converter erstellen wir uns jetzt unsere .woff Font Files. Einfach Font auswählen, hochladen, konvertieren und wieder downloaden. Das müssen wir für jeden Schriftschnitt machen. Eigentlich ganz einfach. Und das gleiche machen wir dann noch einmal, wählen dann aber .otf in .ttf aus. Dann sollten wir am Ende die Schriftschnitte in den beiden Formaten .woff und .ttf vorliegen haben. Diese zwei Formate brauchen wir. Es gibt noch weitere Formate, aber diese zwei reichen uns.
Im nächsten Schritt gehen im WordPress Dashboard zum Elementor Menüpunkt und klicken dort auf Custom Fonts. Dann klicken wir auf den Button „ADD NEW“, vergeben einen Namen und klicken dann auf „ADD FONT VARIATION“.
Jetzt öffnet sich eine Eingabemaske für unsere Font Files. Es gibt WOFF, WOFF2, TTF, SVG und EOT Files. Wir brauchen aber nur die WOFF und TTF Files. Das reicht völlig aus, die anderen kann man vernachlässigen.
Einen wichtigen Punkt gibt es hier zu beachten, wir müssen uns das Font-Weight merken und nach dem Upload richtig auswählen, damit später die Schriften richtig angezeigt werden. Bei der Poppins ist z.B. der Schnitt Bold = Font Weight 700. Das müssen wir so dann gleich auch in der Eingabemaske auswählen. (Siehe Screenshot)
Dann laden wir die Fonts hoch. Dafür jeweils den UPLOAD Button bei WOFF und TTF benutzen. Wenn hochgeladen, wie eben beschrieben, noch das entsprechende „Weight“ auswählen. Wenn wir alle Schriftschnitte hochgeladen haben, brauchen wir nur noch oben rechts auf Veröffentlichen klicken. Dann sind wir damit schon fertig.
Jetzt gehen wir zu den Elementor Einstellungen zu dem Reiter „Erweitert“ und deaktivieren dort die Google Fonts. Die Google Fonts werden dann nicht mehr geladen.
Wenn wir jetzt innerhalb Elementor im Texteditor etc. unter Typografie -> Schriftfamilie unsere Schrift auswählen wollen, finden wir dort jetzt nicht mehr die Google Fonts, aber dafür unsere eben erstellen „Custom Fonts“ und können die dann auswählen. Und schon benutzen wir die Fonts datenschutzkonform, weil wir sie jetzt selbst hosten. So einfach geht das.
Das funktioniert übrigens mit allen Schriften, nicht nur mit Google Fonts. Ich hoffe das hilft euch weiter. Wenn Fragen sind, hinterlasse gern einen Kommentar.
