Wie du den richtigen Webfont auswählst und dessen Ladezeit optimierst

Google Fonts kennt jeder, doch nicht jeder weiß wie er die Webfonts richtig einbinden muss.

Was ist nun am effektivsten, wo liegen die Vorteile und was ist in Sachen Ladezeit empfehlenswert oder zu beachten?

Genau darum soll es heute gehen, denn gemeinsam schauen wir uns an, wie Webfonts im Idealfall eingebunden werden können, um möglichst effizient zu sein und wenig Ladezeit zu verursachen.

Hinweis:
Durch die DS-GVO ist es ab Mai 2018 nicht mehr zu empfehlen Google Fonts direkt von den Google Servern einzubinden. Stattdessen sollte man diese lokal hosten und von dort aus einbinden.

Wird sind alle oberflächlich. Das ist einfach so!

Werbung

Es gibt den Spruch, dass man Bücher nicht nach dem Umschlag beurteilen sollte. Natürlich ist dieser Spruch im Kern richtig, er entsprach aber noch nie gänzlich der Wahrheit. Leser bewerten Bücher nach dem Umschlag und sie bewerten Websites nach ihrem Aussehen, nicht nach ihren Inhalten. Zumindest auf den ersten Blick, entscheidet also fast immer die Optik.

Weil der Mensch nun einmal Oberflächlich ist, aber auch weil die Darstellung nun einmal das ist, was als erstes ins Auge sticht, was direkt nach dem Aufruf einen Eindruck hinterlässt. Positiv, oder eben negativ.

Deshalb ist es in all der Zeit immer wichtiger geworden, auch die Schriftarten entsprechend anzupassen und weg von den sogenannten Web Save Fonts zu gehen, hin zu echten Webfonts. Diese werden direkt vom Server geladen und sind dann im Browser verfügbar, sodass sie als zusätzliches Stilmittel auf Blogs und Websites Verwendung finden können, auch wenn die Schriftart eigentlich nicht im System des jeweiligen Besuchers installiert ist.

Gar nicht mal unwichtig, denn Schrift macht viel aus und kann aus einer echten Textwand, die unangenehm auffällt, einen leicht zu lesenden und gut scannbaren Artikel machen.

Die Ladezeit ist das große Problem von Webfonts

Das mehr oder minder große Problem von Webfonts ist die Ladezeit. Je nach Schriftart und je nach Einbindung der verschiedenen Typen und Schriftstärken, kann so eine Font schonmal mehrere 100 Kilobyte groß sein, die beim Aufruf vom Server angefragt und heruntergeladen werden müssen.

Im Idealfall ist sie das zwar nicht, aber zusammen mit allen anderen Elementen eines Blogs, summiert sich die Größe eben schnell und Webfonts werden zweifelhafter Ballast. Am Ende stellt man sich bei der Optimierung dann die Frage, ob der zusätzliche Font wirklich notwendig ist.

Nun sind wir auf einem guten Weg in Richtung variable Fonts und auch die modernen Formate wie .woff und .woff2 komprimieren Schriften mehr als deutlich. Trotzdem ist nicht jede Art der Integration zu empfehlen und auch wenn HTTP/2 per se kein Problem mehr mit mehreren kleinen Dateien hat, bleiben Webfonts immer noch optimierungsbedürftig. Sie sind einfach keine Set-and-Forget-Lösung, zumindest nicht, wenn man es richtig machen möchte.

WERBUNG

Mein Lieblings-Amazon-Affiliate-Plugin - Mit dem Code SIN20 sparst du 20%!

Font Subsetter heißt das magische Zauberwort für Webfonts

Das ist natürlich leichter gesagt als getan, denn viele wissen gar nicht, wie sie nicht benötigte Zeichen aus einer Font entfernen können.

Doch selbst das ist heutzutage kein Problem mehr, weil es sogenannte Font Subsetter kostenlos im Internet gibt. Ich selbst verwende immer das Tool von FontSquirrel, weil selbiges mit so gut wie keinem Format Probleme hat und die besten Einstellungsmöglichkeiten bzw. Ergebnisse liefert.

Im Webfont Generator müsst ihr zunächst die jeweiligen Font-Typen hochladen, die ihr auf eurer Website verwenden wollt. Also beispielsweise Open Sans Bold, Open Sans Regular und Open Sans Light. Drei Typen, die für euer Design eventuell notwendig sind. Nun klickt ihr auf »Expert«, um im Tool alle Optionen freizulegen.

Ganz oben wählt ihr zunächst die Dateien, die am Ende erzeugt werden sollen. Jeder moderne Browser unterstützt das winzige .woff2, nur Safari hatte in den letzten Versionen noch so seine Probleme mit dem Dateiformat. Wollt ihr also auf Kompatibilität gehen, nutzt ihr .woff. Wollt ihr möglichst viel Performance, könnt ihr direkt .woff2 nutzen. Ich selbst würde aktuell noch zum .woff greifen, einfach weil es überall genutzt werden kann und weniger Probleme macht.

Die weiteren Einstellungen wählt ihr je nach Bedarf oder ignoriert sie einfach, wenn ihr nicht wisst was sie genau bedeuten. Interessant wird es erst wieder beim Punkt »Subsetting«. Dort Geht ihr auf »Custom Subsetting« und schon öffnet sich der wohl wichtigste Punkt im Generator.

Hier könnt ihr pauschal einzelne Sprachen wählen, oder aber sogar die einzelnen Zeichen auswählen. Letzteres empfiehlt sich, wenn ihr den Font nur für die Headline nutzt, oder nur um einen Button-Schriftzug darzustellen. Auch so lohnt es sich, weil ihr Zeichen wie das Euro-Zeichen oft gar nicht benötigt, genau wie verschiedene Satzzeichen.

Jedes Zeichen, welches nicht in den Font übernommen wird, bedeutet weniger Speicher, also auch eine bessere Performance. Ich selbst wähle hier gerne folgende Reihe aus, die alle »normalerweise« verwendeten Zeichen enthält und alles andere aus der Font entfernt.

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
öüäÖÜÄ1234567890“,.-:%/&!?()@߀

Euro-, E-Mail-, Prozentzeichen etc. können unter Umständen ebenfalls gelöscht werden, in meinem Fall benötige ich sie aber öfter mal und behalte sie bei.

Das war es dann auch schon. Jetzt weiter nach unten Scrollen, den Haken machen, auf Download klicken und abwarten, bis der fertige Font generiert wurde. Das dauert manchmal ziemlich lange, je nachdem wie sehr der Generator bzw. Server gerade ausgelastet ist. Einfach geduldig sein und am besten kurz einen Kaffee kochen.

Schriften Pagespeed-Konform einbinden

Auch wenn der Subsetter uns fertige Codes zum einfügen der Fonts erstellt, ignorieren wir diese. Stattdessen wird der generierte Font im richtigen Format auf den Server bzw. in das Theme-Verzeichnis von WordPress geladen.

Wer so irre ist wie ich, kann den Namen der Font jetzt noch weiter kürzen, denn desto weniger Zeichen im Code gebraucht werden, desto besser. Statt den Font also »OpenSans-Regular.woff« zu nennen, könnt ihr diesen auch einfach »o.woff« nennen.

Als Performance-Fanatiker suche ich mir jetzt den kleinsten Code und nutzte die Methode mittels Minimal CSS. Oft wird behauptet, diese wäre nicht ideal, in meinem Fall war sie aber immer die schnellste und stabilste Methode, auch was den Pagespeed angeht. Gerade wenn ihr euer CSS in den Head integriert, ist diese Methode rasend schnell. Wer sich das mal anschauen möchte, schaut in den Code auf meinem Blog fastwp.de, wo ich den Font genauso einfüge und 100 Punkte bei Pagespeed Insights erreiche.

In meinem Fall nutze ich für jeden Font den @Fontface-Befehl und minimiere den Code auf das nötigste, mit so wenig Zeichen wie machbar. Übrigens nutze ich im Beispiel direkt den Google-Font, also keine lokal gespeicherte Kopie, was oft schneller funktioniert als der eigene Server.

@font-face{font-family:’o’;font-weight:400;src:url(/wp-content/themes/o.woff) format('woff')}

Google Fonts herunterladen oder direkt verlinken

Wie ihr einen Font generiert und einbindet wisst ihr nun, aber woher bekommt ihr die Schriften eigentlich und wie kann man den Code von Google zur Datei erhalten?

Auch das ist relativ einfach. Zum einen könnt ihr bei den Google Fonts seit neuestem jede Schriftart über das kleine Icon herunterladen.

Diese Dateien könnt ihr dann in den Subsetter packen und optimieren.

Oder aber ihr nutzt das Google CDN, ohne die unnötigen Anfragen und besorgt euch den direkten Link zur jeweiligen Datei. Dafür den Google Fonts Code im Browser öffnen und dann den Link zur Datei in das @fontface eurer CSS einfügen. Im Beispiel würde das so aussehen:

Diesen Link von Google…

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

…ruft ihr so im Browser auf…

https://fonts.googleapis.com/css?family=Open+Sans

…und wählt dann diesen Abschnitt…

https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRYX0hVgzZQUfRDuZrPvH3D8.woff2

…so für die eigene Verlinkung innerhalb der CSS

@font-face{font-family:’o’;font-weight:400;src:url(//fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff')}

Performance und Optimierung bedeuten immer Arbeit

Das war eigentlich auch schon alles zum Thema Webfonts, was ihr wissen müsst. Wer gnadenlos optimieren möchte, speichert und verändert sie. Wer das Google CDN direkt nutzen will, holt sich einfach den Link aus der Anfrage, statt den Umweg einzubauen. Effektiv und effizient zu sein bedeutet also auch immer etwas mehr Aufwand zu betreiben, doch gerade bei Fonts merkt ihr den Unterschied in Sachen Ladezeit sehr schnell.

Es gibt inzwischen so viele Mythen und Gerüchte diesbezüglich und das meiste stammt noch aus der Zeit, in denen Webfonts neu, die Browser aber noch etwas alt waren.

Und bald wird sich wieder alles verändern, denn schon jetzt stehen die variablen Webfonts in den Startlöchern und lassen hoffen. Doch dazu in einem anderen Artikel mehr.

Werbung