Zum Inhalt wechseln
  • Allgemein
  • Performance
  • SEO
  • Animationen
  • Barrierefreiheit
  • Elementor
  • Allgemein
  • Performance
  • SEO
  • Animationen
  • Barrierefreiheit
  • Elementor
Free Guide

Lokale Einbindung von Schriftarten mit Elementor Pro

Joey Sander

Autor

Mai 2023
Zuletzt aktualisiert
Artikel teilen
Facebook
Twitter
LinkedIn
WhatsApp
Elementor Pro
Hier sichern
Adobe Cloud
Studenten und Lehrer sparen bis zu 60 % bei Adobe Creative Cloud.
Elementor
Wenn du bspw. eine von den über 800 Google-Schriftarten auf deiner Website verwenden möchtest, kannst du deine gewählten Schriften mit Elementor Pro ganz einfach lokal einbinden. Dann bist du aus DSGVO-Sicht auf der sicheren Seite. Dieser Beitrag erklärt dir Schritt für Schritt, wie das geht.
Inhaltsverzeichnis

Eigene Schriften hochladen

  1. Gehe im WordPress-Dashboard auf Elementor > Custom Fonts
  2. Klicke den Button „Add New“
  3. Gib deiner Schrift einen Namen und klicke auf „Add Font Variation„

Hier sind bereits ein paar Schriften eingefügt. Bei dir wird das Ganze zunächst leer aussehen.

100 = Thin; 200 = Extra Light; 300 = Light; 400 = Regular; 500 = Medium; 600 = Semi Bold; 700 = Bold; 800 = Extra Bold; 900 = Black

Hier wählst du die Schriftbreite aus. Anschließend klickst du auf Upload und es öffnet sich deine Mediathek. Hier wählst du deine jeweilige Font mit passender Schriftbreite aus. Also die Schriftbreite, die du zuvor ausgewählt hast. Bspw. 400 für Regular. Hast du noch keine Fonts in der Mediathek hochgeladen, erfährst du im weiteren, wo du Google Fonts downloaden kannst.

Hinweis: Hochgeladene Schriftarten werden im Ordner wp-content/uploads/ auf deinem Server gespeichert.

Folgende Schriftformate sind verfügbar

  • The Web Open Font Format (WOFF) – WOFF ist das am meisten empfohlene Format, da es von allen modernen Browsern unterstützt wird.
  • The Web Open Font Format (WOFF 2.0) – TrueType/OpenType-Schriftart bietet eine bessere Komprimierung als WOFF 1.0
  • TrueType-Schriften (TTF) – Diese Schriftart wurde in den späten 1980er Jahren von Apple und Microsoft entwickelt.
  • SVG-Fonts/Shapes – SVG-Fonts ermöglichen die Verwendung von SVG als Glyphen bei der Anzeige von Text. Achte darauf, dieses Format zu verwenden, um alte Versionen des iPhone zu unterstützen.
  • Eingebettete OpenType-Schriften (EOT) – Diese Schriftdatei funktioniert mit dem IE, aber nicht mit anderen Browsern. Verwende dieses Format, um frühere Versionen des IE zu unterstützen.

Woher bekomme ich Google Fonts?

https://fonts.google.com/

Jeweilige Schriftart herunterladen, die Zip-Datei entpacken und die einzelnen Schriftformate in der WordPress-Mediathek hochladen.

 

Prüfung der lokalen Einbindung

Nun wollen wir noch prüfen, ob die Fonts auch wirklich lokal geladen werden. Hierzu leerst du erst einmal jegliche Caches auf deiner WP-Installation. Nutzt du Cloudflare? Leere den Cache. Nutzt du ein Plugin, wie bspw. WP Optimize, WP Fastest Cache, Cache Enabler oder vergleichbares? Leere den Cache. Nutzt du zum Beispiel ein kostenpflichtiges Theme? Prüfe, ob es einen Cache hat – wenn ja leere auch diesen.

  1. Gehe sicher, dass du jegliche Caches auf deiner Website geleert hast
  2. Rufe ein Inkognitofenster auf
  3. Drücke die Taste „F12“ (oder alternativ Rechtsklick iwo auf der Website und dann „Untersuchen“).
  4. Es öffnet sich ein Fenster – Wählen den Reiter „Sources“ und lade die Seite neu
  5. Wird unter Sources kein fonts.googleapis.com mehr gelistet, dann hast du deine Google Font erfolgreich lokal eingebunden

 

Fazit

Das könnte dir auch gefallen

4 Säulen einer Website
Mai 2023

4 wichtige Säulen deiner WordPress Installation

Das WordPress Plugin Directory enthält über 55.000 Plugins. Bevor du aber anfängst, zahlreiche Plugins zu installieren, solltest du die erst einmal die wirklich relevanten Bereiche deiner Website abdecken.
Mai 2023

Verschiedene Cache-Arten in WordPress

Mit Caching müssen Ressourcen nicht bei jedem Seitenaufruf rechenintensiv generiert und zusammenfügt werden, sondern werden als statische Seite aus dem Zwischenspeicher gezogen.
WordPress Einstellungen
Mai 2023

Grundlegende WordPress-Einstellungen 2023 (Teil 1)

Bevor du eine Wordpress-Website erstellst, solltest du zunächst einige grundlegende Einstellungen vornehmen. Welche hier sinnvoll sind, erfährst du im Folgenden.

Der ultimative Leitfaden für WordPress

Von SEO über Performance bis hin zu Animationen, die deine Zielgruppe begeistern werden. Verpasse keine Neuigkeiten - abonniere kostenfrei den worbl Newsletter.
Indem du fortfährst, stimmst du zu, dass du die Datenschutzrichtlinien von worbl gelesen hast.
worbl ist der All-in-One-Premium-Blog für die Umsetzung deiner Vision. Von SEO über Performance bis hin zu Animationen, die deine Zielgruppe begeistern werden.

Alle Kategorien

  • Allgemein
  • Performance
  • SEO
  • Animationen
  • Barrierefreiheit
  • Elementor
  • Allgemein
  • Performance
  • SEO
  • Animationen
  • Barrierefreiheit
  • Elementor

Sonstiges

  • Newsletter
  • Kontakt
  • Newsletter
  • Kontakt
Experte werden
© 2023 worbl. All rights reserved.
  • Impressum
  • Datenschutz
  • Cookie-Einstellungen
  • Impressum
  • Datenschutz
  • Cookie-Einstellungen

Kontaktformular

  • Allgemein
  • Performance
  • SEO
  • Animationen
  • Barrierefreiheit
  • Elementor
  • Allgemein
  • Performance
  • SEO
  • Animationen
  • Barrierefreiheit
  • Elementor
Experte werden
Gründe für WordPress