1. Blog

To Google Web Font or not?

Schriften sind wichtig für das Design und die Usability einer Webseite. Die Macher von Medium, dem Blog-Netzwerk für „gehobene“ publizistische Inhalte, investieren sehr viel Zeit und damit Geld in die Typografie ihrer Webseite. Und das nicht ohne Grund: Eine gute Lesbarkeit ist enorm wichtig. Was nicht gut lesbar ist, wird auch nicht gelesen!

To Google Web Font or not?

Google Fonts bieten eine günstige, nämlich völlig kostenfreie Möglichkeit, Schriften in die eigene Webseite einzubinden. Doch nur, weil es möglich ist, muss man es nicht gleich tun! Sie sollten den Einsatz externer Schriften immer abwägen.

1. Genügt nicht auch eine Web Safe Font?

Web Safe Fonts - was ist das jetzt schon wieder? Damit sind Schriften gemeint, die nicht extra extern geladen werden müssen, sondern mit großer Wahrscheinlichkeit schon auf dem Endgerät (Smartphone, Tablet, Desktop) des Besuchers installiert sind.

Die „Große Wahrscheinlichkeit“ variiert dabei zwischen über 99 und unter 10%. Man kann sich also nie völlig sicher sein, dass die präferierte Schrift angezeigt wird. Es ist aber möglich mehrere Schriften im Stylesheet der Webseite zu definieren, die sehr ähnlich sind, so das man eine „fast“ einheitliche Darstellung auf unterschiedlichen Endgeräten erreicht.

Vorteil: Web Safe Fonts müssen nicht mehr extern geladen werden. Das wirkt sich positiv auf die Ladezeit der Webseite aus.

Nachteil: Sind die im Stylesheet angegebenen Schriften auf dem Endgerät des Besuchers nicht vorhanden, wird eine generische (unerwünschte) Schrift verwendet. Standard-Schriften wie Arial, Verdana oder Georgia sind allerdings auf fast allen Endgeräten vorhanden.

Übersicht über Web Safe Fonts

2. Google Fonts

Google Fonts sind eine kostenlose Alternative zu Web Safe Fonts.

Die Einbindung von Google Fonts auf die eigene Webseite ist relativ selbsterklärend. Die Seite zeigt einem den Code an, den man entweder in die HTML-Datei oder das Stylesheet einfügt. Fertig.

Die Auswahl ist riesig. Da ist klar, dass nicht alle Schriften empfehlenswert sind. Zudem eignen sich einige Schriften oder Schriftschnitte nur für größere Überschriften und andere vornehmlich für kleineren Fließtext. Inspiration für gute Schriften und Schriftkombination finden Sie auf den folgenden Webseiten:

Beautiful Web Type

Vorteil: Einfache Einbindung, große Auswahl, kostenlos.

Nachteil: Schriften müssen geladen werden und liegen auf einem externen Google-Server.

Google Fonts

3. Google Fonts downloaden und lokal einbinden

Die Google Fonts kann man auch lokal, auf dem eigenen Server ablegen und einbinden. Derzeit gibt es allerdings keinen Download-Button für die Web Fonts auf der Google Fonts Webseite. Die Dateien liegen aber auf GitHub. Leider ist dieser Weg für Nicht-Entwickler (und auch Entwickler) nicht ganz so selbsterklärend.

Viel einfacher geht das mit der Webseite localfont: Einfach Schrift und Schriftschnitte auswählen, Dateien downloaden und CSS-Code für die Integration der Schriften in das Stylesheet anzeigen lassen. Fertig.

Vorteil: Große Auswahl, kostenlos, keine Abhängigkeit von Dritten.

Nachteil: Die Schrift muss immer noch geladen werden, auch wenn sie auf dem eigenen Server liegt. Es ist aber möglich, die Ladezeit durch Inlinen der Schrift in die HTML-Datei oder das Stylesheet zu optimieren (projektabhängig).

Google Fonts über localfont

Fazit
Natürlich gibt es weitere Quellen für kostenlose Schriften neben Google Fonts. Und die Möglichkeit eine Web Font käuflich zu erwerben. Wenn das Unternehmen schon auf eine kostenpflichtige Schrift setzt und diese ebenfalls im Web eingesetzt werden soll (Stichwort: Corporate Styleguide), ist das Kaufen einer Schrift meist alternativlos. Aber Vorsicht: Die Lesbarkeit ist wichtiger als das Corporate Design (für Print)! Was auf dem Briefbogen funktioniert, kann im Web fehl am Platz sein.

Ob Web Safe Fonts, Google Fonts oder lokale Google Fonts zum Einsatz kommen, hängt vom Projekt ab. Der Einsatz von Schriften im Web sollte immer sparsam und überlegt erfolgen.