So hosten Sie Schriften lokal in WordPress (Classic & Block Themes!)

Die Verwendung benutzerdefinierter Webfonts ist zwar eine großartige Möglichkeit, Ihre Website einzigartiger zu machen und Ihr Branding hervorzuheben, sie kann jedoch auch mit bestimmten Problemen verbunden sein – vom Datenschutz bis zur Leistung. Die Lösung: Hosten Sie Ihre Schriftarten stattdessen lokal auf Ihrer WordPress-Website.

Um Ihnen dabei zu helfen, verraten wir Ihnen in diesem Beitrag alles, was Sie zu diesem Thema wissen müssen. Im Folgenden besprechen wir, warum es eine gute Idee ist, Schriften überhaupt lokal in WordPress zu hosten, und geben Ihnen dann einen Überblick über Code- und No-Code-Lösungen, um dies sowohl in klassischen Themen als auch in WordPress-Blockthemen zu ermöglichen.

Webfonts lokal oder remote hosten

Das erste, worüber wir wahrscheinlich sprechen müssen, ist, was das lokale Hosten von Schriftarten überhaupt bedeutet.

Heutzutage verwenden viele Leute sogenannte Webfonts, um die Typografie auf ihren Websites zu ändern. Dies sind Schriftartdateien, die normalerweise von einem Drittanbieterdienst geladen werden, von denen der beliebteste Google Fonts ist.

Es verfügt über eine riesige Bibliothek mit kostenlosen Schriftarten, die Sie auf Ihrer Website verwenden können, indem Sie einfach einen speziellen Link hinzufügen. Wenn dann jemand anfordert, Ihre Website zu sehen, werden sie aus der Ferne geladen, damit Sie sie den Besuchern anzeigen können. Google Fonts ist auch in viele Themes integriert, sodass Benutzer ihre Schriftart sehr einfach wechseln können.

Wenn Sie Schriftarten dagegen lokal hosten, werden Ihre Schriftartdateien nicht von einem Remote-Server wie dem von Google geladen, sondern befinden sich stattdessen auf Ihrem eigenen Server und Besucher erhalten sie von dort. Am Ende erreichen beide dasselbe, nur auf unterschiedliche Weise.

Warum sollten Sie Schriftarten lokal in WordPress hosten?

Es gibt viele gute Gründe, Schriftdateien auf Ihrem eigenen Server abzulegen, anstatt eine Lösung eines Drittanbieters zu verwenden:

• Datenschutzbedenken – Insbesondere wenn Sie den europäischen Datenschutzgesetzen unterliegen, kann die Verwendung von Webfonts, insbesondere von Google, problematisch sein. Das Unternehmen sammelt Besucher-IP-Adressen und andere Informationen, die Sie in Ihrer Datenschutzrichtlinie erwähnen müssen, wenn Sie sie verwenden möchten. Andernfalls riskieren Sie eine Geldstrafe. Um solche Probleme zu vermeiden, entscheiden sich viele Leute einfach dafür, Schriftarten stattdessen lokal zu hosten.
• Fond-Verfügbarkeit – Das Problem bei der Verwendung von gehosteten Schriftarten von Drittanbietern besteht darin, dass Sie sich von dem Dienst abhängig machen, der sie bereitstellt. Wenn sie ihr Geschäft aufgeben, einen Serverausfall haben oder sich ihre URL aus irgendeinem Grund ändert, ist Ihre Website plötzlich ohne die von Ihnen gewählte Schriftart. Während das im Fall von Google unwahrscheinlich ist, weiß man nie, und verrücktere Dinge sind passiert.
• Größere Auswahl – Während etablierte Bibliotheken eine große Auswahl an verschiedenen Schriftarten anbieten, gibt es noch viel mehr verfügbare Schriftarten, die nicht in Form von Webschriftarten vorliegen. Wenn Sie also wissen, wie Sie Schriftarten lokal hosten, haben Sie viel mehr Möglichkeiten, Premium-Schriftarten zu kaufen und zu verwenden.
• Leistung – Wenn Sie Ihre eigenen Schriftarten hosten, haben Sie die volle Kontrolle darüber, wie sie geladen werden. Sie können ihr Caching konfigurieren und alle Probleme auf Ihrem eigenen Server beheben. Darüber hinaus führt das Hosten Ihrer eigenen Schriftarten zu weniger HTTP-Anforderungen, da Sie keine Daten von einer anderen Verbindung abrufen müssen. All dies ist gut für die Leistung der Website.

Nachteile und Vorbehalte

Gleichzeitig sprechen aber auch einige Faktoren dagegen, Schriften auf Ihrem lokalen Server zu hosten:

• Nochmals Leistung – Google Fonts sind besonders leistungsfähig eingerichtet. Sie haben ein CDN, um Schriftdateien vom nächstgelegenen Server bereitzustellen. Darüber hinaus befinden sich viele der beliebtesten Schriftarten bereits in den Caches der meisten Browser. Infolgedessen werden sie schneller geladen als Ihre benutzerdefinierte Premium-Schriftart. Aus dem gleichen Grund sollten Sie Ihre eigenen Videos nicht hosten. Aus all den oben genannten Gründen ist es eine gute Idee, Ihr eigenes CDN zu verwenden, wenn Sie lokale Schriftarten verwenden möchten.
• Höhere Komplexität – Das lokale Einrichten Ihrer Schriftartdateien ist schwieriger als beispielsweise die Verwendung der in Ihrem Design installierten Google Fonts. Wie Sie jedoch unten sehen werden, ist es nicht viel schwieriger, es sei denn, Sie gehen den vollständig manuellen Weg. Tatsächlich gibt es einige Ein-Klick-Plugin-Lösungen.

Ein kurzes Wort über Dateiformate

Eine Sache, die Sie wissen sollten, ist, dass Schriftarten in verschiedenen Formaten verfügbar sind, von denen die gängigsten sind:

• TrueType-Schriftarten (.ttf) – Dies ist ein Schriftartstandard, der in den 1980er Jahren von Apple und Microsoft entwickelt wurde. Es ist das gebräuchlichste Format für Betriebssysteme und auch im Web verwendbar. Obwohl es nicht das empfohlene Dateiformat ist, ist es ein guter Fallback für ältere Versionen von Safari, iOS und Android.
• OpenType-Schriftarten (.otf) – Das auf TrueType basierende und von Microsoft entwickelte und markenrechtlich geschützte .otf Format ist für skalierbare Computerschriftarten.
• Eingebettete OpenType-Schriftarten (.eot) – Dies ist ein Legacy-Format von OpenType zum Rendern im Web. Es wird von älteren Versionen des Internet Explorers benötigt.
• Web Open Font Format (.woff) – WOFF wurde explizit für die Verwendung in Webseiten entwickelt. Es ist das OpenType/TrueType-Format mit Komprimierung und zusätzlichen Metadaten. Dieses Format wird vom W3C zur Verwendung empfohlen und von allen gängigen Browsern unterstützt.
• Web Open Font Format 2.0 (.woff2) – Eine verbesserte Version von .woff mit besserer Komprimierung für schnelleren Download. Von Google entwickelt und mit sehr modernen Browsern kompatibel.
• SVG-Schriftarten (.svg) – Es ist auch möglich, SVG-Formen für Schriftarten zu verwenden, aber diese Methode wird derzeit nur von Safari unterstützt.

Welches Format sollten Sie also wählen? Leistungsmäßig ist WOFF/WOFF2 natürlich am sinnvollsten. Um jedoch mit älteren Browsern kompatibel zu sein, ist auch die Einbindung anderer Formate sinnvoll. Außerdem stellen einige Anbieter wie Google Fonts nur .ttf oder ähnliche Formate zum Download bereit. Glücklicherweise gibt es Möglichkeiten, dies zu umgehen, die wir Ihnen gleich zeigen werden.

Beachten Sie jedoch die oben genannten Punkte, wenn Sie benutzerdefinierte Schriftarten für Ihre Website von einem Anbieter beziehen.

Lokales Hosten von Schriftarten in WordPress (manuell, klassische Designs)

An dieser Stelle werden wir endlich darüber sprechen, wie Sie Schriftarten praktisch lokal auf Ihrer WordPress-Site hosten können. Wir müssen eine Reihe verschiedener Szenarien abdecken und beginnen mit klassischen Themen und der manuellen Methode.

Dies ist der technischste Ansatz, also lernen Sie zuerst die schwierigste Methode, bevor wir einfachere Lösungen durchgehen. Das Ganze von Hand zu machen, wird Ihnen helfen, die Mechanik dahinter zu verstehen und dabei auch Ihre WordPress-Fähigkeiten verbessern.

1. Holen Sie sich Ihre Schriftdateien

Das erste, was Sie zum lokalen Hosten von Schriftarten benötigen, sind Schriftartdateien. Google Fonts ermöglicht den Download, stellt aber, wie oben erwähnt, noch nicht die neuesten Dateiformate zur Verfügung. Während Sie ihre Dateien theoretisch selbst in Ihr gewünschtes Format umwandeln können, ist es viel einfacher, stattdessen den Google Webfonts Helper zu verwenden.

Sie haben nicht nur die Konvertierungsarbeit für Sie erledigt, die Site stellt Ihnen auch den notwendigen Code zum Einbetten Ihrer Schriftarten zur Verfügung.

Als erstes müssen Sie hier eine Schriftart auswählen, die Ihnen gefällt. Dazu können Sie entweder die Liste links oder das Suchfeld darüber verwenden. Wenn Sie Ihre gewünschte Schriftart gefunden haben (für dieses Beispiel verwenden wir Advent Pro), ist es an der Zeit, rechts Ihren Zeichensatz und Ihre Stile auszuwählen.

Überprüfen Sie zunächst, ob Sie kyrillische, griechische oder lateinische erweiterte Zeichen benötigen. Aktivieren Sie darunter die Kontrollkästchen für alle benötigten Schriftstile. Stellen Sie sicher, dass Sie nur diejenigen auswählen, die Sie tatsächlich auf Ihrer Website verwenden werden, damit Sie die Besucher nicht dazu bringen, Dinge zu laden, die sie nicht einmal sehen.

Unter CSS kopieren können Sie auswählen, welche Dateiformate Sie herunterladen möchten.

Die Einstellung „Beste Unterstützung “ umfasst .eot , .ttf , .svg , .woff und .woff2 -Dateien, während moderne Browser nur die beiden letzteren enthalten. Es ist normalerweise eine gute Idee, die Standardeinstellung beizubehalten.

Wenn Sie mit Ihrer Auswahl zufrieden sind, scrollen Sie ganz nach unten und klicken Sie auf die große blaue Schaltfläche, um Ihre Dateien herunterzuladen.

2. Laden Sie die Schriftdateien auf Ihre WordPress-Site hoch

Sobald Sie die Schriftartendateien auf Ihrer Festplatte haben, besteht der erste Schritt darin, sie zu entpacken. Danach müssen Sie sie auf Ihren Server bringen.

Verbinden Sie sich dazu über einen FTP-Client und navigieren Sie zu Ihrem Themenverzeichnis (innerhalb von wp-content > themes ). Hier ist es sinnvoll, die Dateien in einem eigenen Verzeichnis abzulegen, zB fonts . Erstellen Sie daher zuerst das Verzeichnis und ziehen Sie dann Ihre Schriftdateien per Drag-and-Drop in Ihren FTP-Client, um sie hochzuladen.

Die Dateien sind klein, daher sollte dies nicht sehr lange dauern und Sie können mit dem nächsten Schritt fortfahren.

3. Laden Sie die lokalen Schriftarten in Ihr WordPress-Design

Als nächstes müssen Sie, wenn Sie die lokalen Schriftarten auf Ihrer Website verwenden möchten, diese zuerst laden. Dafür stellt Google Webfonts Helper freundlicherweise bereits das notwendige Markup zur Verfügung. Sie haben es wahrscheinlich schon einmal gesehen.

Unten können Sie den Ordnernamen anpassen, falls der Ordner, in dem Sie Ihre Dateien abgelegt haben, nicht fonts heißt. Sie sollten bereits früher Ihre Auswahl getroffen haben, ob Sie den Code für höchste Kompatibilität oder nur für moderne Browser verwenden. Deshalb jetzt einfach in das Feld mit dem Markup klicken, um alles zu markieren, und dann mit Strg/Cmd+C kopieren.

Gehen Sie danach zum Ordner Ihres Designs auf Ihrem Server und öffnen Sie das Stylesheet ( style.css ). Fügen Sie hier das zuvor kopierte Markup am Anfang ein.

Kurzer Hinweis: Um relative Pfade mit @font-face zu verwenden, d. h. wenn Sie möchten, dass WordPress auf Ihre lokalen Schriftartendateien im fonts in Ihrem Designordner zugreift, müssen Sie ../ vor den obigen URLs löschen. In meinem Fall würde jede Zeile so aussehen:

 url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

Dies setzt voraus, dass sich Ihre style.css Datei direkt in Ihrem Designordner befindet.

Nachdem Sie alle erforderlichen Änderungen vorgenommen haben, speichern Sie die Datei und laden Sie sie erneut hoch, und Sie können Ihre lokalen Schriftarten auf Ihrer WordPress-Site verwenden.

4. Beseitigen Sie Schriftarten, die bereits auf Ihrer Website geladen werden

Dieser Schritt gilt nur, wenn Ihr Design bereits Schriftarten von Drittanbietern einbezieht. Sie möchten dies aus den oben genannten Gründen beseitigen sowie um nicht dieselbe Schriftart zweimal zu laden und auch zu sehen, ob Ihre lokalen Schriftarten wirksam sind.

Wie Sie Schriftarten von Drittanbietern deaktivieren, hängt davon ab, wie sie überhaupt geladen werden. Einige Themen haben spezielle Optionen, mit denen Sie zu einer Systemschriftart oder ähnlichem wechseln können.

Wenn sie aus irgendeinem Grund fest in Ihre header.php Datei codiert sind, müssen Sie sie von dort entfernen (verwenden Sie dafür ein untergeordnetes Thema). Wenn sie über functions.php geladen werden, können Sie den Aufruf von dort entfernen. Tun Sie dies auch in einem untergeordneten Thema.

Schließlich gibt es das Deaktivieren und Entfernen von Google Fonts, das Sie ausprobieren können. Autoptimize hat auch eine Option zum Entfernen von Google Fonts, Sie finden sie auf der Registerkarte Extra .

4. Verwenden Sie Ihre lokalen Schriftarten

Der letzte Schritt besteht darin, Ihre lokalen Schriftarten tatsächlich Elementen auf Ihrer Website zuzuweisen. Im Design Twenty Twenty-One können Sie beispielsweise das folgende Markup verwenden:

 .entry-title { font-family: Advent Pro; }

Dies führt dazu, dass die Titel Ihrer Blogbeiträge in der neuen Advent Pro-Schriftart erscheinen:

Lokale Schriftarten in klassischen Themen hosten: Plugin-Edition

Wenn Ihnen das obige zu kompliziert ist und Sie bereits Google Fonts auf Ihrer Website haben (z. B. über ein Design), können Sie auch eine WordPress-Plugin-Lösung verwenden, um Ihre Schriftarten lokal zu hosten. Eine der besten Optionen dafür ist das Plugin OMGF oder Optimize Google Fonts, das kostenlos im WordPress-Verzeichnis verfügbar ist. Installieren Sie es wie gewohnt über Plugins > Add New .

Sobald Sie dies getan haben, finden Sie unter Einstellungen einen neuen Menüpunkt namens Google Fonts optimieren . Klicken Sie darauf, um zu diesem Menü zu gelangen:

Die Verwendung ist ziemlich einfach. In den meisten Fällen müssen Sie nur unten auf Speichern & Optimieren klicken. Das Plug-in findet dann automatisch alle Google Fonts-Stylesheets auf Ihrer Website und ersetzt sie durch lokale Versionen. Sie können sie alle am unteren Rand des Bildschirms sehen.

Hier haben Sie auch die Möglichkeit, das Plugin so zu konfigurieren, dass einige der Schriftarten oder Schriftstile nicht geladen oder vorgeladen werden, was für Typografie wichtig ist, die über dem Falz erscheint. Es gibt einige weitere Einstellungen, aber sie sind hauptsächlich für Fälle gedacht, in denen etwas nicht funktioniert.

OMGF hat auch ein Addon für die Installation weiterer Google Fonts auf Ihrer Website bezahlt. Es ist sehr günstig und einen Besuch wert. Andere Plugin-Optionen umfassen Perfmatters und die Pro-Version des oben genannten Plugins zum Deaktivieren und Entfernen von Google Fonts.

Manuelles Hosten von Schriftarten in WordPress-Blockdesigns

Mit WordPress-Blockdesigns können Sie auch lokale Schriftarten verwenden. Zum Zeitpunkt des Schreibens dieses Artikels ist das alles, was sie tun, Sie können derzeit keine Schriftarten von Drittanbietern in einem Blockdesign hosten (obwohl eine API dafür in Arbeit ist).

Aus diesem Grund sind die ersten Schritte, das Erfassen von Schriftdateien und das Hochladen auf Ihren Server, die gleichen wie bei klassischen Designs. Ab da beginnen die Unterschiede.

Laden von Schriftarten in theme.json

In Blockdesigns ist theme.json die zentrale Datei für das Styling, und dort richten Sie die Schriftarten ein. Suchen Sie dazu unter settings und typography nach fontFamilies .

In Blockdesigns werden neue Schriftarten mit den folgenden Werten hinzugefügt:

• fontFamily — Der Name der neuen Schriftart, wie er in CSS verwendet wird. Das bedeutet, dass es Fallback-Schriftarten enthalten kann.
• name — Name der Schriftart, die im WordPress-Backend angezeigt wird.
• slug – Ein eindeutiger Bezeichner, den WordPress in der benutzerdefinierten CSS-Eigenschaft verwendet.
• fontFace — Dies entspricht der CSS- @font-face Regel und stellt die Schriftart wirklich in die Warteschlange.

Um zu funktionieren, enthält fontFace mehrere andere Informationen:

• fontFamily — Der Name der Schriftart (wieder).
• fontWeight — Eine durch Leerzeichen getrennte Liste verfügbarer Schriftstärken.
• fontStyle (optional) — Hier können Sie das font-style Attribut setzen, zB normal oder italic .
• fontStretch (optional) – Zum Beispiel für Schriftfamilien, die eine komprimierte Version haben.
• src — Pfad zur lokalen Schriftdatei.

Sie können mehrere Schriftdateien in fontFace einbinden, zB um verschiedene Stile zu laden. Trennen Sie sie dazu mit geschweiften Klammern und einem Komma. So sieht das für dasselbe Schriftartbeispiel wie oben aus:

 "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-italic.woff" ] } ] } ]

Wenn das Gutenberg-Plugin aktiv ist, können Sie stattdessen auch wp_register_webfonts() innerhalb functions.php verwenden, was eine neue PHP-Funktion für diesen Zweck ist, die noch nicht in Core enthalten ist. Es verwendet dieselben Argumente wie oben, jedoch im PHP-Format.

Lokale Schriftarten in Blockdesigns: Plugin-Lösung

Schließlich ist es mit Hilfe von Plugins auch möglich, Schriften in WordPress-Block-Themes lokal zu hosten. Eines davon ist das Plugin Create Block Theme. Nachdem Sie es installiert und aktiviert haben, fügt es dem Menü „Darstellung“ eine neue Option „Themenschriftarten verwalten“ hinzu.

Hier können Sie eine Vorschau der in Ihrem aktuellen Design enthaltenen Schriftfamilien anzeigen sowie ganze Schriftfamilien oder einzelne Stile entfernen.

Noch interessanter sind die Schaltflächen mit der Aufschrift „Google-Schriftart hinzufügen“ und „Lokale Schriftart hinzufügen“ oben. Beginnen wir mit der Google Font-Option.

Die Verwendung ist wirklich einfach. Klicken Sie auf die Schaltfläche und wählen Sie die gewünschte Schriftart aus der Dropdown-Liste oben aus. Aktivieren Sie danach die Kästchen für die Schriftstärken und -stile, die Sie Ihrem Design hinzufügen möchten. Klicken Sie abschließend unten auf Google-Schriftarten zu Ihrem Design hinzufügen .

Das Plug-in lädt dann automatisch die von Ihnen ausgewählten Schriftarten herunter und bettet sie ein, sodass sie im Block- und Site-Editor verfügbar sind.

Die lokale Schriftartoption funktioniert sehr ähnlich.

Der Unterschied besteht darin, dass Sie eine Schriftartdatei von Ihrer Festplatte hochladen und den Namen, Stil und die Stärke der Schriftart angeben müssen, damit das Thema weiß, was was ist (das Plugin versucht auch automatisch, diese Informationen zu erkennen). Das bedeutet auch, dass Sie Ihre Schriftdateien einzeln hochladen müssen. Insgesamt ist es jedoch super einfach.

Sind Sie bereit, Schriftarten lokal in WordPress zu hosten?

Benutzerdefinierte Schriftarten sind eine beliebte Methode, um Ihre Website aufzupeppen. Die Möglichkeit, sie lokal in WordPress zu hosten, wird jedoch aus Performance-, rechtlichen und anderen Gründen immer wichtiger.

Oben haben wir mehrere Wege dazu beschritten. Sie können dies entweder manuell oder mithilfe eines Plugins erreichen. Es gibt auch Unterschiede bei der Verwendung eines Block- oder klassischen Themas, obwohl die Prinzipien insgesamt sehr ähnlich sind. Wir hoffen, Sie fühlen sich der Aufgabe jetzt gewachsen.

Wie haben Sie sich dafür entschieden, Ihre Schriftarten lokal in WordPress zu hosten? Lass es uns im Kommentarbereich wissen!