Wenn es um das Hosten und Verwenden von Schriftarten auf deiner WordPress Seite geht, gibt es viele verschiedene Möglichkeiten. Du kannst sie lokal hosten, du kannst Google Fonts verwenden (die meisten Themes haben heutzutage Google Fonts integriert), oder du kannst einen anderen Drittanbieter-Dienst wie Adobe Fonts nutzen. Heute wollen wir in ein paar Gründe eintauchen, warum das Hosten von lokalen Fonts in WordPress von Vorteil sein kann. Nicht nur, dass du eine größere Auswahl an HTML-Schriftarten hast, sondern es gibt manchmal auch Performance-Vorteile. In unserem ausführlichen Tutorial erfährst du, wie du deine Premium-Schriften lokal hosten kannst, aber auch jede andere Schriftfamilie von Google Fonts.
- Was sind Web Fonts?
- Lokale Fonts hosten vs. Drittanbieter-Fonts
- Wie man lokale Schriften in WordPress hostet
Was sind Web Fonts?
Wenn du auf deine WordPress Seite gehst, siehst du zwei Arten von Schriftarten, Web Safe Fonts oder Web Fonts. Oder sie könnten auch eine Mischung aus beidem verwenden.
Empfohlene Lektüre: Wie man die Schriftart in WordPress ändert.
- Websichere Schriftarten sind Schriftarten, die auf einem Gerät oder Betriebssystem vorinstalliert sind. Einige Beispiele für websichere Schriftarten sind Arial, Times New Roman und Courier New sowie generische Schriftfamilien wie Serif, Sans-Serif (siehe moderne Schriftarten) und Monospace. Dies sind Schriftarten, die du seit vielen Jahren kennst. Hier findest du eine vollständige Liste der websicheren Schriftarten.
- Webfonts sind Schriftarten, die nicht auf einem Gerät vorinstalliert sind und vom Browser des Nutzers heruntergeladen werden müssen, bevor sie angezeigt werden. Einige Beispiele für Webfonts sind die Google-Schriftarten Open Sans und Roboto sowie die beliebte Schriftart Proxima Nova von Adobe Fonts.
Google Fonts ist ein Open Source Schriftenverzeichnis, das in den letzten Jahren weit verbreitet ist. Laut BuiltWith nutzen über 45% der Top 10.000 Webseiten Google Fonts auf ihren Webseiten. Und wenn wir uns die Google Fonts Analytics anschauen, können wir sehen, dass sie über 17 Quadrillionen Views hatten. Das ist eine Menge! Open Sans und Roboto sind die beiden am häufigsten genutzten Schriftfamilien, wobei Roboto im letzten Jahr ein sattes Wachstum von 77% verzeichnen konnte. Wir haben einen Beitrag über die besten Google Fonts, schau ihn dir unbedingt an: Die 15 besten Google Fonts in Zahlen.
Lokale Fonts hosten vs. Drittanbieter
Bevor wir in das Tutorial eintauchen, ist es wichtig, ein paar Vor- und Nachteile zwischen dem Hosten lokaler Schriften und der Nutzung eines Drittanbieters zu verstehen. Lokales Hosten von Schriften bedeutet, dass du die Schriftdateien auf deinem eigenen Server hast (oder auf dein CDN kopierst, das du auch für alle anderen Assets verwendest). Wenn du hingegen einen Drittanbieter wie Google Fonts oder Adobe Fonts nutzt, bindest du die Schriftarten einfach durch einen Link zu einem externen Asset ein.
Vorteile von lokalen Fonts
1. Größere Auswahl an Schriftarten
Ein großer Vorteil der Verwendung von lokalen Schriften ist, dass du eine viel größere Auswahl an Schriften hast! Auch wenn die Bibliotheken von Drittanbietern wie Google Fonts und Adobe Fonts sehr umfangreich sind, können sie nicht mit den Premium-Font-Shops mithalten, in denen du jede beliebige Premium-Schriftart kaufen und auf deiner Webseite hosten kannst. Wir werden in unserem Tutorial eine Premium-Schriftart verwenden, die du nicht über einen Drittanbieterdienst beziehen kannst.
2. Könnte besser integriert werden
Aufgrund der größeren Auswahl an Schriftarten kann es sein, dass du beim lokalen Hosten eine Schriftart wählen kannst, die sich besser in dein Branding integriert, um die Konsistenz auf deiner Webseite zu erhalten. Das alles hängt von deinen Designanforderungen und Vorlieben ab.
3. Du musst dich nicht auf Dienste von Drittanbietern verlassen
Wenn du Fonts lokal hostest, musst du dich nicht auf Dienste von Drittanbietern oder deren Server verlassen. Dienste wie Adobe Fonts (früher Typekit) sind dafür bekannt, dass sie ausfallen, was dich wiederum schlecht aussehen lässt. Weniger Abhängigkeiten auf deiner WordPress Seite zu haben, ist immer besser.
When https://t.co/Kde0okKlP0 is down the web stops working #customfontssuck #3rdpartyjs
— Mark ⛔️🐝 (@markhealey) November 17, 2015
4. Volle Kontrolle über das Caching
Durch die Verwendung lokaler Schriftarten hast du die volle Kontrolle über das Caching deiner Schriftdateien. Wenn du Google Fonts oder einen anderen Dienst eines Drittanbieters verwendest, kann es sein, dass du Fehler oder Warnungen siehst, dass den Ressourcen ein Cache-Validator fehlt oder dass sie expires-Header benötigen. Diese werden auf Serverebene behoben, und wenn sie auf einem Drittanbieter-Server liegen, hast du keine Kontrolle über die Behebung dieser Fehler.
5. Weniger Requests können schnellere Ladezeiten bedeuten
Aufgrund der Tatsache, dass Web Fonts von einem Drittanbieter heruntergeladen werden müssen, kann dies wiederum einen Einfluss auf die Ladezeit deiner Webseite haben. Du weißt nie, wie schnell deren Server gerade arbeiten. Mit deinem WordPress Host hast du jedoch mehr Kontrolle darüber, oder solltest es zumindest! Adobe Fonts, zum Beispiel, fügt 2 externe HTTP-Anfragen hinzu und es kodiert auch alle Schriftformate mit base64. Wenn du dich nicht mit Fonts auskennst, brauchst du nicht mehr alle Schriftformate zu bedienen, sondern nur noch WOFF und WOFF2 (wenn du auf zusätzliche Kompression setzt).
Mit Google Fonts hast du auch einen zusätzlichen DNS-Request, um fonts.googleapis.com aufzurufen, um die CSS-Datei zu holen. Du hast dann zusätzliche Anfragen an fonts.gstatic.com, um die Schriftdateien herunterzuladen. Wenn du lokal hostest, kommen alle Anfragen von der gleichen Domain und höchstwahrscheinlich wirst du keine weitere CSS-Datei benötigen, da sie in der CSS-Datei deines WordPress-Themes enthalten sein wird.
6. Einzelne HTTP/2 Verbindung
Wenn du noch nicht über die Vorteile von HTTP/2 gelesen hast, empfehlen wir dir, dies zu tun. Indem du deine Schriften lokal oder auf deinem CDN hostest, kannst du die Vorteile einer einzigen HTTP/2-Verbindung für bessere Parallelität und Multiplexing nutzen.
Nachteile von lokalen Fonts
Nachdem wir nun die Vorteile von lokalen Fonts besprochen haben, gibt es auch einige Nachteile, die du beachten solltest.
1. Google Fonts könnten bereits gecached sein
Google Fonts nutzt ein eigenes CDN, das schnell ist, schließlich ist es Google. Aufgrund der Tatsache, dass so viele Webseiten bereits Google Fonts nutzen, könnte es sehr gut sein, dass der Nutzer die Schriftart bereits im Cache seines Browsers hat. Wenn du eine einzigartigere, hochwertigere Schriftart verwendest, könnte es die Downloadzeiten tatsächlich erhöhen. Wenn jemand zum Beispiel eine Webseite besucht, die die Schriftart Roboto von Google Fonts verwendet, wird sie in den Cache geladen. Wenn sie dann deine Webseite besuchen, die ebenfalls Roboto verwendet, muss die Schriftart nicht erneut heruntergeladen werden. Wenn du aber eine neu veröffentlichte Premium-Schriftart wie Proxima Soft verwendest, muss sie höchstwahrscheinlich heruntergeladen werden, was die Ladezeiten erhöhen kann.
Wenn du eine Premium-Schriftart verwendest, die nicht weit verbreitet ist, solltest du damit rechnen, dass der Browser dieser Person es herunterladen muss, wenn sie das erste Mal auf deine Webseite kommt. Hinweis: Wenn du eine beliebte Google-Schriftart verwendest und sie lokal hostest, wie z.B. Roboto, trifft dies nicht zu, da der Browser intelligent genug ist, um es im Cache zu erkennen (egal ob es von Google oder lokal von deiner Webseite geladen wird).
2. Mehr Komplexität
Uns ist klar, dass nicht jeder da draußen ein WordPress-Guru ist. Das Hosten von lokalen Fonts erfordert definitiv ein wenig mehr Setup. Ein WordPress-Theme kann zum Beispiel Google Fonts automatisch in seinem Theme aufrufen und wenn du Fonts lokal hostest, musst du einen Weg finden, den Aufruf dieser Fonts auf deiner Webseite zu deaktivieren. Das könnte bedeuten, dass du deinen Theme-Entwickler um eine schnelle Codezeile bitten musst. Das mag kompliziert klingen, aber wir werden versuchen, es im folgenden Tutorial so einfach wie möglich zu erklären.
3. Sorgfältiger bei der Wahl der Schriftarten
Wenn du lokale Schriftarten hostest, musst du auswählen, welche Schriftarten du unterstützen möchtest. Wenn du nur die neueren Formate auswählst, wie z.B. nur WOFF2, könntest du ältere Browser ausschließen, die dann wiederum auf alte, websichere Schriftarten zurückgreifen würden. Laut CanIUse könnten zum Beispiel IE11, Safari und einige Versionen des Android Browsers Probleme damit haben, nur WOFF2 Webfonts zu verwenden. Du wirst also wahrscheinlich WOFF + WOFF 2 verwenden wollen, um auf der ganzen Linie sicher zu sein. WOFF 2 bietet viel höhere Kompressionsmethoden, deshalb solltest du beides verwenden.
Wenn du einen Drittanbieter-Service nutzt, ist es fast unmöglich, dies zu vermasseln, da dieser eine breite Palette an Browser-Support von Haus aus berücksichtigt. Wenn du also lokal hostest, musst du bei der Auswahl der Schriftarten etwas vorsichtiger sein.
4. Mach es nicht ohne CDN
Viele Webseiten nutzen heute ein CDN wie Cloudflare oder KeyCDN, um die Auslieferung ihrer Assets zu beschleunigen. Das ist wichtig, denn es reduziert die Latenz und die DNS-Lookup-Zeiten auf der ganzen Linie. Wenn du lokale Schriftarten verwendest und kein CDN nutzt, kann es sein, dass deine Webseite langsamer wird, als wenn du einen Dienst wie Google Fonts oder Adobe Fonts nutzt. Der Grund dafür ist, dass alle diese Dienste ein CDN nutzen, um ihre Schriften auszuliefern. Daher empfehlen wir dir, sofern du nicht nur Traffic in einem kleinen geografischen Gebiet hast, immer ein CDN zu nutzen, wenn du deine eigenen Fonts hostest. Und natürlich solltest du sicherstellen, dass du einen CDN-Anbieter verwendest, der HTTP/2 unterstützt.
Das Kinsta CDN unterstützt HTTP/2 und kostenlose Bandbreite ist für alle Kunden inklusive. 🚀
Wie man lokale Fonts in WordPress hostet
Jetzt ist es Zeit für den spaßigen Teil! Das Hosten deiner lokalen Fonts in WordPress. Wir gehen im Folgenden zwei verschiedene Optionen durch, eine mit einer Premium-Schriftart, die wir gekauft haben, und die zweite ist, tatsächlich eine Google-Schriftart zu nehmen und sie lokal zu hosten. In diesem Tutorial verwenden wir eine frische WordPress-Installation mit dem installierten Twenty Seventeen Theme.
1. Wie man Premium Fonts lokal hostet
Um eine Premium-Schriftart lokal zu hosten, haben wir uns für Fontspring und die neue Proxima Soft Schriftart entschieden, die im Januar 2017 veröffentlicht wurde. Die Proxima Nova Soft wurde von Mark Simonson entwickelt und ist eine neuere Version der ursprünglichen Proxima Nova. Wir haben uns für Fontspring entschieden, weil sie keine Tracking-Skripte von Drittanbietern benötigen und die Schriftart nur einmalig gekauft werden muss und auf einer unbegrenzten Anzahl von Webseiten verwendet werden kann. Sei sehr vorsichtig, wenn du Fonts kaufst, da viele von ihnen Tracking-Skripte von Drittanbietern benötigen, was in gewisser Weise den Zweck des lokalen Hostings zunichte macht.
Wir haben die Proxima Soft Regular und die Proxima Soft Bold Schriftarten gekauft. Generell ist eine normale Schriftart und fett für die meisten Webseiten ausreichend. Je nach deiner Webseite kannst du dir auch eine kursive Version und Semi-Bold zulegen. Hinweis: Wir haben keine Partnerschaften mit Fontspring, wir denken einfach, dass sie den Kauf und die Lizenzierung von Premium-Schriften richtig machen!
Schritt 1
Nachdem du deine Fonts gekauft hast, bekommst du eine E-Mail mit einem Link zu den Font-Dateien.
Schritt 2
Jede Schriftart, wie z.B. bold und regular, hat ihre eigenen Schrifttypen, wie WOFF2, WOFF, TTF, etc. In diesem Beispiel werden wir nur die WOFF- und WOFF2-Versionen von bold und bold regular verwenden, was einen guten Support für moderne Browser gewährleistet.
Schritt 3
Wir nehmen die Schriftdateien und laden sie per FTP auf deine WordPress Seite in einen Ordner namens „fonts“. In diesem Beispiel nutzen wir ein CDN für alle unsere Assets, zusammen mit dem kostenlosen CDN Enabler Plugin vom Team bei KeyCDN. Dieses Plugin kopiert automatisch die Schriften, die wir gerade hochgeladen haben, in unser CDN. Auch wenn wir sagen, dass wir sie lokal hosten, referenziert ein CDN immer noch deine lokalen Assets. Der wichtige Teil ist, dass du alle deine Assets von einem Ort aus anbietest und nicht mehrere Domains (Hosts) referenzierst.
Schritt 4
Du musst deine neuen Schriftarten in CSS auf deiner WordPress Seite referenzieren. Viele Themes haben heutzutage ein eigenes CSS-Panel, oder du kannst ein kostenloses Plugin wie Simple Custom CSS and JS verwenden. Wir fügen den folgenden Code ein, der unsere CDN URL referenziert.
@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}Du musst auch deine Styles aktualisieren, damit sie auf die neue Schriftfamilie verweisen. Hier ist ein Beispiel für den Code, den wir für das Twenty Seventeen Theme verwendet haben.
body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}Hier ist ein Screenshot vom Simple Custom CSS and JS Plugin.
Schritt 5
Wenn in deinem WordPress Theme bereits Google Fonts integriert sind, solltest du sicherstellen, dass du diese deaktivierst. Andernfalls kann es sein, dass du sowohl deine lokalen Schriftarten als auch die Google Fonts lädst. Da wir in diesem Tutorial das Twenty Seventeen Theme verwenden, nutzen wir das kostenlose Plugin Disable Google Fonts. Dies funktioniert nur für die Standard-Themes in WordPress. Für die meisten Themes musst du dich wahrscheinlich an den Entwickler wenden und er kann schnell eine Funktion zum Deaktivieren von Google Fonts bereitstellen. Oder schaue in der Dokumentation nach, in der Regel ist dies ein sehr schneller Tweak. Einige Themes haben sogar eine Option, um sie im Backend ein- oder auszuschalten.
Und das war’s! Hier ist ein Screenshot mit unserer neuen Proxima Soft Schriftart, die für unsere Körperschrift und Überschriften im Twenty Seventeen Theme geladen wird.
Und hier ist ein Screenshot unserer HTTP-Anfragen. Wie du sehen kannst, haben wir nur 2 Anfragen für die WOFF2-Fonts, anstatt der 4 Anfragen von Google, die wir vorher gezeigt haben. Wir haben die WOFF-Fonts auch auf unserer Webseite, aber da Chrome WOFF2 unterstützt, werden diese stattdessen gezogen. Hätten wir die Webseite z.B. mit dem IE 11 aufgerufen, wären stattdessen die WOFF-Fonts geladen worden.
2. Wie man Google Fonts lokal hostet
Die zweite Möglichkeit, Fonts lokal zu hosten, besteht darin, eine Schriftart, die du bereits auf Google Fonts magst, einfach auf deinen Server oder ins CDN zu verschieben. Open Sans ist bekannt dafür, sehr leichtgewichtig und super schnell zu sein. Also werden wir diese in unserem Beispiel verwenden.
Schritt 1
Die Google Fonts holst du dir am besten mit dem kostenlosen google-webfonts-helper Tool, das wir für dieses Tutorial verwenden. Vielleicht möchtest du dir auch das Font Face Observer Projekt anschauen. Als erstes musst du nach dem gewünschten Google Font suchen und die Stile auswählen. Wir wählen wieder die Schriftstile regular und bold (700).
Schritt 2
Dann musst du auswählen, welchen Browser Support du möchtest. Moderne Browser geben dir die WOFF und WOFF2 Schriftarten, was wir wollen. Der beste Support bietet dir WOFF, WOFF2, EOT, TTF und SVG. Wie du sehen kannst, gibt es den Code, den du in die Zwischenablage kopieren kannst, sowie das Download-Zip mit den Schriften.
Der Rest der Anleitung ist dann sehr ähnlich zu unserem Premium-Schriftarten Beispiel oben.
Schritt 3
Wir nehmen die Schriftdateien und laden sie per FTP auf deine WordPress Seite in einen Ordner namens „fonts“ hoch. In diesem Beispiel verwenden wir ein CDN für alle unsere Assets, zusammen mit dem kostenlosen CDN Enabler Plugin vom Team bei KeyCDN. Dieses Plugin kopiert automatisch die Schriften, die wir gerade hochgeladen haben, in unser CDN. Auch wenn wir sagen, dass wir sie lokal hosten, referenziert ein CDN immer noch deine lokalen Assets. Der wichtige Teil ist, dass du alle deine Assets von einem Ort aus anbietest und nicht mehrere Domains (Hosts) referenzierst.
Schritt 4
Du musst deine neuen Schriftarten in CSS auf deiner WordPress Seite referenzieren. Viele Themes haben heutzutage ein eigenes CSS-Panel, oder du kannst ein kostenloses Plugin wie Simple Custom CSS and JS verwenden. Wir fügen den folgenden Code ein, der unsere CDN URL referenziert.
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}Du musst auch deine Styles aktualisieren, damit sie auf die neue Schriftfamilie verweisen. Hier ist ein Beispiel für den Code, den wir für das Twenty Seventeen Theme verwendet haben.
body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}Hier ist ein Screenshot vom Simple Custom CSS and JS Plugin.
Schritt 5
Wenn dein WordPress Theme bereits Google Fonts integriert hat, solltest du sicherstellen, dass du sie deaktivierst. Das mag ein wenig ironisch erscheinen, da wir ja Google Fonts verwenden. Aber der Grund, warum du das tun musst, ist, um die externen Anfragen zu deaktivieren. Da wir in diesem Tutorial das Twenty Seventeen Theme verwenden, nutzen wir das kostenlose Plugin Disable Google Fonts. Dies funktioniert nur für die Standard-Themes in WordPress. Für die meisten Themes musst du dich wahrscheinlich an den Entwickler wenden und er kann schnell eine Funktion zum Deaktivieren von Google Fonts bereitstellen. Oder schaue in der Dokumentation nach, in der Regel ist dies ein sehr schneller Tweak. Einige Themes haben sogar eine Option, um sie im Backend ein- oder auszuschalten.
Und das war’s! Hier ist ein Screenshot unserer neuen Google Open Sans Schriftart, die im Twenty Seventeen Theme für den Body und die Header geladen wird.
Und hier ist ein Screenshot von unseren Anfragen. Wie du sehen kannst, haben wir nur 2 Anfragen für die WOFF2-Fonts, anstatt der 4 Anfragen von Google, die wir vorher gezeigt haben. Wir haben die WOFF-Fonts auch auf unserer Webseite, aber da Chrome WOFF2 unterstützt, werden diese stattdessen gezogen. Hätten wir die Webseite z.B. mit dem IE 11 aufgerufen, wären stattdessen die WOFF-Fonts geladen worden.
Zusammenfassung
Und das war’s! Du weißt jetzt, wie du lokale Fonts von einem Premium-Font-Shop hostest oder Google Fonts auf deinen eigenen Server und/oder ins CDN verschiebst. Jetzt kannst du einen Blick auf all die schönen Schriften da draußen werfen, ohne dir Gedanken darüber zu machen, wie sie die Performance beeinflussen. Sie könnten deiner WordPress Seite das neue Gesicht geben, das sie braucht (lies unbedingt unseren ausführlichen Guide über WordPress Fonts)! Und wenn du dich fragst, warum wir keine lokalen Schriftarten verwenden, dann liegt das daran, dass wir an einem neuen Design für unsere Webseite arbeiten. Eine weitere großartige Alternative, die du in Betracht ziehen solltest, sind Systemschriften.
Wir würden uns freuen zu hören, wie dein Setup ist. Nutzt du einen Drittanbieter, um deine Webfonts zu laden und hast du schon versucht, lokal zu hosten?
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar