So einfach kannst du Google Fonts und Schriften von anderen Quellen lokal auf deiner WordPress Website installieren. Alles was du brauchst ist eine FTP-Verbindung zu deinem Server.
1. Schrift herunterladen
Lade deine Schrift von einer Quelle wie Google Fonts herunter. In meinem Beispiel habe ich die Schrift Comfortaa genutzt. Du findest in dem Paket eine oder mehrere Dateien mit der Endung .ttf, alternativ aber auch Dateien mit der Endung .woff, woff2, .otf oder .eot.
Unser Favorit ist die Variante mit der Dateiendung .woff2, oder alternativ .woff als Vorgängermodell. In meinem Fall der Comfortaa steht aber nur die .ttf zur Verfügung.
2. Schrift via FTP/SFTP auf den Server laden
Als FTP-Programm kannst du beispielsweise FileZilla nutzen. Deine FTP/SFTP-Zugangsdaten findest du im Account bei deinem Hoster.
Navigiere in der Verzeichnisstruktur deines Servers in den Ordner:
wp-content > themes > dein-aktives-theme > (assets) > fonts
Lege hier einen Ordner für deine eigene Schrift an. In meinem Fall ist das „comfortaa“. In diesen Ordner legst du dann deine .woff2, .woff oder .ttf-Datei.
Geschafft: Deine Schrift liegt nun lokal auf dem Server im Verzeichnis deines Themes. Jetzt nur noch die Schrift im theme registrieren…
3. Registriere deine Schrift im Theme
Kopiere das Code-Snippet und füge es in der theme.json-Datei vor der ersten vorhandenen Schrift ein. Passe dabei den Pfad und den Namen deiner Schrift an.
{
"fontFace": [{
"fontFamily": "Comfortaa",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "normal",
"src": [
"file:./assets/fonts/comfortaa/Comfortaa-VariableFont_wght.ttf"
]
}],
"fontFamily": "'Comfortaa', cursive",
"name": "Comfortaa",
"slug": "comfortaa"
},
Navigation im Dashboard: Werkzeuge > Theme-Datei-Editor > Theme-Stile und Block-Einstellungen
Jetzt nur doch den Button „Datei aktualisieren“ klicken und fertig. Jetzt kannst du deine Schrift im Editor verwenden und sie wird nur noch lokal von deinem Server geladen.
Dein WordPress-Backend sieht anders aus?
Ich nutze in meiner Anleitung WordPress im absoluten Standard mit dem Theme „Twenty Twenty Three“ und dem Gutenberg Editor. Also unverändert wie nach einer frischen Installation und ganz ohne Theme-Builder.
Mit dem Block-Editor kann man nämlich auch alles bauen, was man früher nur mit Theme-Buildern wie Divi, Elementor, Astra, Enfold oder Beaver Builder machen konnte. Ich supporte diese umständlichen Krücken aber leider nicht in meinen Anleitungen. Die Zukunft gehört dem Standard-Editor. Daher könnte es auch für dich Sinnvoll sein, sich langfristig mit dem Standard-Editor anzufreunden. Themes in diesem Sinne werden voraussichtlich sterben.
Dateitypen .ttf, .woff, woff2 – was ist was?
Das sind alles Schriftart-Dateiformate, die in verschiedenen Kontexten und Browsern verwendet werden, um Text auf Webseiten und in Anwendungen darzustellen. Hier ist eine kurze Erklärung zu jedem Dateiformat:
.ttf (TrueType Font) ist ein weit verbreitetes und älteres Schriftformat, das sowohl auf Windows- als auch auf macOS-Plattformen unterstützt wird. Es wurde ursprünglich in den späten 1980er Jahren von Apple und Microsoft entwickelt.
.woff (Web Open Font Format) ist ein komprimiertes Font-Format, das speziell für die Verwendung im Web entwickelt wurde. Es bietet eine bessere Leistung als TrueType- oder OpenType-Dateien, da es eine kleinere Dateigröße hat und somit schneller geladen werden kann.
.woff2 ist eine Weiterentwicklung von .woff, die eine noch stärkere Kompression bietet und somit schnellere Ladezeiten ermöglicht. Sie bietet eine größere Unterstützung für verschiedene Schriftarten-Features.
.otf (OpenType Font) ist eine von Adobe und Microsoft entwickeltes Schrift-Format. Optimal für den Einsatz auf dem Rechner und Programmen wie Photoshop.
.eot (Embedded OpenType): Dieses Schriftformat ist hauptsächlich für Internet Explorer-Versionen 4 bis 8 optimiert und ist damit in neueren Browsern weniger weniger unterstützt.
In Bezug auf die beste Wahl für die Verwendung in Webprojekten ist das WOFF2-Format heutzutage die empfohlene Option, da es eine bessere Kompression und schnellere Ladezeiten bietet. WOFF2 wird von den meisten modernen Browsern unterstützt. Um jedoch eine breitere Browser-Kompatibilität zu gewährleisten, ist es ratsam, auch WOFF- und TTF-Dateien bereitzustellen. EOT und OTF sind in den meisten modernen Webprojekten weniger relevant, es sei denn, Sie müssen speziell ältere Versionen des Internet Explorer unterstützen.
