(Google) Web-Schriftarten: Tipps, Tricks und Optimierungen

Die Wahl einer guten Schriftart ist für Ihre Website unerlässlich. Aber was genau ist die Definition einer “guten” Webschrift? Wenn Sie diese Frage einem Webdesigner stellen, werden Sie wahrscheinlich eine andere Antwort erhalten als wenn Sie sie einem Entwickler stellen.

Das liegt daran, dass es leider keine ultimative Web-Schriftart gibt, wenn man sowohl die Sichtweise von Designern als auch von Entwicklern betrachtet. Während ein Designer eine einzigartige und coole Schriftart wählt, ist ein Webentwickler aufgrund von Einschränkungen oder Leistungsproblemen nicht immer glücklich mit dieser Wahl.

Stehen Sie gerade vor der Entscheidung, eine Schriftart für Ihre Website zu wählen, und sind Sie neugierig auf meine Vision? Ich würde Ihnen gerne mehr darüber erzählen, damit ich Ihnen helfen kann, die beste Wahl zu treffen.

Was ist eine Webfont?

Der Begriff Webfont stammt aus der Verwendung von Schriftarten in Websites. Es ist ein etwas zweideutiger Begriff, der sich einerseits auf die Technologie bezieht, die die Verwendung von Schriftarten auf einer Website ermöglicht. Zum anderen – und das ist der naheliegendste Grund – aufgrund der Schriftarten, die dank dieser Technologie im Web verwendet werden können.

Stürmische (Web-)Entwicklung aufgrund von Webfonts

In den Anfängen (sprich: um das Jahr 1995) war die Verwendung von Schriftarten durch die auf den Systemen der Web-Besucher standardmäßig installierten Schriftarten begrenzt. Wenn eine Schriftart auf einer Website verwendet wurde, die dieses System nicht kannte, wurde sie nicht angezeigt und hatte keine Auswirkungen auf die Darstellung der Schriftart. Frühe Entwicklungen in diesem Bereich ermöglichten es, im HTML (und später auch im CSS) festzulegen, welche Schriftarten Elemente innerhalb der Website erhalten.

In dieser Zeit wurde oft eine “sichere Schriftart” gewählt. Dies waren oft Schriftarten wie:

• Arial
• Verdana
• Comic Sans
• Verdena
• Trebuchet

Diese Schriftarten werden auch als “Core fonts for the Web” bezeichnet. Damals waren diese Schriftarten standardmäßig auf allen (Microsoft-)Computern installiert. Aufgrund der begrenzten Auswahl dieser Schriftarten sahen damals viele Web-Designs (sprich: Texte) gleich aus.

Schriftartenstapel

Um sicherzustellen, dass eine Website richtig angezeigt wird, kann ein ‘Font Stack’ verwendet werden. Dabei handelt es sich um eine Liste mit einer Reihe ähnlicher Schriftarten. Eine der generischen Schriftarten kann als Ausweichoption definiert werden. Dadurch wird sichergestellt, dass der Browser auf die Standardschriftart für diese Familie zurückgreifen kann, wenn die ursprüngliche (bevorzugte) Schriftart nicht vorhanden ist.

Neue Technologien

Mit den vielen Entwicklungen der Technologien in den letzten Jahrzehnten sind verschiedene Methoden hinzugekommen, um zusätzliche Schriftarten für eine einzigartige Website zu verwenden. Während um 1998 (bei der Einführung von CSS2) die Möglichkeit aufkam, Schriften über die Funktion @font-face “einzubetten”, wurde sie seit der Einführung von CSS3 vom W3C als Standardmethode festgelegt.

Durch die Möglichkeit, Schriften “einzubetten” (sprich: aus dem Internet herunterzuladen), haben sich die Möglichkeiten der Textdarstellung im Web drastisch verbessert, und es ist grundsätzlich möglich, jede beliebige Schrift zu verwenden.

Öffentliche und lizenzierte Schriftarten

Nicht jede Schriftart kann einfach so auf Ihrer Website verwendet werden; ein wesentlicher Einwand ist, dass bestimmte Schriftarten dem Urheberrecht unterliegen. Das bedeutet, dass die Schöpfer und/oder Rechteinhaber eine Lizenz für die Verwendung verlangen. In diesem Fall können Sie eine Lizenz beantragen, die je nach Schriftart recht teuer sein kann.

Glücklicherweise gibt es aber auch viele Schriften, die kostenlos verwendet werden können. Einer der größten Anbieter dieser Schriften ist Google. Im Jahr 2010 beschloss Google, den Dienst“Google Fonts” ins Leben zu rufen. Dabei handelt es sich um eine Bibliothek mit Hunderten von Open-Source-Schriftarten. Die Schriftarten können von diesem Dienst heruntergeladen oder gehostet werden.

Warum Google Web Fonts?

Wir empfehlen fast immer, eine dieser Schriftarten für Ihre Website zu verwenden. Neben der Tatsache, dass diese Schriftarten kostenlos (lizenzfrei) und einfach zu implementieren sind, gibt es eine Reihe wichtiger Vorteile, nämlich

1. Google-Schriften werden in der Regel schnell geladen, sie sind leichtgewichtig und das Google-Hosting ist schnell, so dass Sie wertvolle Ladezeit sparen.
2. Die Schriften werden von allen Browsern unterstützt, es gibt keine unterschiedlichen Ansichten auf verschiedenen Geräten/Browsern.
3. Sie sind für das Web und seine Lesbarkeit optimiert, so dass Sie keine Nachteile bei den Tools oder Probleme bei der Benutzerfreundlichkeit haben.
4. Die Auswahl ist riesig, jetzt enthält die Bibliothek mehr als 999 Schriftarten!

Bei mehr als 999 Google Web Fonts können wir uns gut vorstellen, dass man den Wald vor lauter Bäumen nicht mehr sieht. Kollegin Nienke freut sich daher, ihre Top 10 der Google Webfonts mit Ihnen zu teilen! Tauchen Sie ein in ihren Artikel und lassen Sie sich inspirieren!

Webfonts und Ladezeiten

Wenn Webfonts falsch eingesetzt werden, kann sich die Ladezeit einer Webseite enorm verlängern. Die Größe kann im Extremfall sogar mehrere MB erreichen. Wir empfehlen, maximal drei verschiedene Schriftfamilien zu verwenden und die “font-weights” auf ein Minimum zu beschränken.

Die “falsche” Verwendung einer Webschrift kann nicht nur die Ladezeit einer Website beeinträchtigen, sondern auch zu Strafpunkten bei den Core Web Vitals von Google führen.

Größtes inhaltsreiches Bild (LCP)
Das Laden von Webfonts kann zu einer Verzögerung bei der Anzeige des größten Inhaltselements auf der Seite führen (Render-Blocking). Dies kann passieren, wenn die Webschriftarten nicht optimiert sind oder zu viele Varianten geladen werden. Dies führt dazu, dass die Seite länger braucht, um visuell vollständig zu sein.

Erste Eingabeverzögerung (FID)
Sie wirkt sich auch indirekt auf die erste Eingabeverzögerung aus. Wenn der Browser mit dem Laden/Rendering von Webfonts beschäftigt ist, kann er andere wichtige Aufgaben verzögern. Nehmen wir zum Beispiel die Reaktion auf eine Benutzeraktion.

Kumulative Layout-Verschiebung
Webfonts können Layoutverschiebungen verursachen, was zu Punktabzügen bei der CLS-Bewertung führt. Wenn der Browser zunächst eine Ausweichschrift anzeigt und diese dann in die endgültige Schriftart ändert (Schriftart-Anzeige: Swap), kann dies eine Layout-Verschiebung (CLS-Malus) verursachen. Mit anderen Worten: ein schlechtes Benutzererlebnis.

Unsere Tipps zur Optimierung von Webschriften

Wenn Sie sich für eine Google-Webschrift entscheiden, sind Sie schon auf einem guten Weg! Das heißt aber nicht, dass Sie nicht trotzdem Strafpunkte bei Google bekommen können, wenn Sie diese Schriftarten nicht richtig verwenden. Natürlich geben wir Ihnen einige Tipps und Tricks, wie Sie Ihre Website in Bezug auf Webfonts optimieren können.

1. Verwenden Sie eine Mindestanzahl von Schriftarten und Variationen
   Wir haben es bereits in diesem Artikel erwähnt, aber wählen Sie beim Webdesign so wenig verschiedene Schriftfamilien wie möglich. Jede Schriftart und -variante muss geladen werden, was die Ladezeit Ihrer Website nur verlängert.
2. Verwenden Sie moderne (web-optimierte) Formate
   Das modernste und empfehlenswerteste Format für Web-Fonts ist derzeit das WOFF2-Format. Dieses verfügt bereits über eine gute Komprimierung, so dass es schneller geladen wird als z. B. ein WOFF-, EOT- oder sogar TTF-Format.
3. Verwenden Sie die CSS-Eigenschaft “font-display”, um das Verhalten zu beeinflussen
   Wie bereits erwähnt, kann diese Eigenschaft bei unsachgemäßer Verwendung zu einem CLS-Abzug führen, was Sie zweifellos vermeiden möchten. Die beste Wahl hängt auch hier von der jeweiligen Nutzungssituation und den Prioritäten ab. Testen Sie daher, was für Sie am besten funktioniert. Wahrscheinlich wird es “Swap” oder “Fallback” sein.
4. Hosten Sie Ihre Webfonts lokal
   Hosten Sie die Webfonts selbst, um externe Abhängigkeiten zu vermeiden und mehr Kontrolle über das Caching zu haben.
5. Laden Sie (kritische) Webfonts vor
   Erstellen Sie eine Webschriftart und geben Sie ihr beim Laden Vorrang. Wenn Sie die obigen Tipps beherzigen, sollte dies nicht mehr allzu viel Ladezeit in Anspruch nehmen. Sie können dies mit dem unten stehenden Skript umsetzen:

<link rel=”preload” href=”/assets/Pacifico-Bold.woff2″ as=”font” type=”font/woff2″ crossorigin>

Erste Schritte mit (Web-)Schriftarten

Es beginnt damit, dass Sie die Anzahl der (Web-)Schriften, die Sie für Ihr Webdesign verwenden möchten, einfach und vor allem begrenzt halten. Danach ist es wichtig, diese Schriften bei der Erstellung der Website richtig einzusetzen und zu optimieren. Auf diese Weise können Sie sicherstellen, dass Sie eine einzigartige Website haben, die auf allen Geräten gut und schnell angezeigt wird!

Haben Sie nach dem Lesen dieses Artikels noch Fragen oder sind Sie neugierig, ob wir Ihnen bei der Optimierung Ihres WordPress-Webdesigns helfen können? Wir freuen uns, mit Ihnen mitzudenken! Unsere Designer und Entwickler sind gerne für Sie da.