Das Web Fonts Projekt von Google ist mittlerweile schon länger online, dennoch habe ich den Eindruck, dass viele Webdesigner und -entwickler diese Möglichkeit zur Verwendung externer Schriftarten auf der eigenen Webseite noch nicht kennen. Dabei bieten sowohl die angeboten Fonts als auch die Art der Verwendung & Einbettung diverse Vorteile gegenüber klassischen Varianten.
Der Hintergrund
Eine gefühlte Ewigkeit war man als Webentwickler darauf angewiesen, sich auf die bestehenden Standard-Fonts bei der Umsetzung einer Webseite zu verlassen. Auf einer recht sicheren Seite war man beispielsweise, wenn man sich für den Font Arial entschied, da dieser auch auf Mac-Rechnern vorhanden ist. Spannender wurde die Geschichte bereits ab etwas exotischeren Schriftarten wie Georgia, Verdana, Tahoma oder gar der ab Windows Vista eingeführten Calibri.
Mit dem aufkeimen von CSS3 und der Unterstützung durch die gängigsten Browser wurden die Spielregeln für Web Fonts durch den neuen Befehl @font-face grundlegend geändert. Diese CSS-Eigenschaft gab es zwar bereits rudimentär ab dem Internet Explorer 5, doch kam sie mangels Unterstützung durch den Mozilla Firefox nur selten zum Einsatz.
@font-face ermöglicht es dem Webentwickler, per CSS externe Schriftarten-Dateien auf den Server zu laden und auf der Webseite einzubinden. In der Praxis könnte dies zum Beispiel so aussehen:
Nachteile bei der Verwendung von @font-face
Mit @font-face wird es zwar möglich, externe Schriftarten jeglicher Art auf Webseiten einzubetten, jedoch kommt diese Technik auch mit einigen Nachteilen daher.
- Die Browser wollen andere Formate. Würden alle Browser dass gleiche Schriftarten-Format verstehen wäre die Webentwickler-Welt einfach. So ist es aber leider nicht: Der geliebte Internet Explorer beispielsweise unterstützt nur das EOT-Format, welches aber kein anderer Browser verstehen will. Aber auch bei den weiteren Formaten TTF, OTF und SVG gibt es bei den diversen Browsern durchaus Unterschiede bei Akzeptanz und Darstellung.
- Die Font-Varianten brauchen eigene Dateien. Wer seine eingebundene Schriftart fett, kursiv oder gar fett & kursiv darstellen möchte, der muss für jede dieser Varianten im schlechtesten Fall eine eigene Schrift-Datei hochladen; natürlich wieder in Browser-übergreifenden Versionen.
- Die Ladezeit verringert sich. Wer sich schon einmal Schrift-Dateien im Detail angeschaut hat, der weiß, wie groß solche werden können. Rechnet man noch die verschiedenen Font-Varianten und Browser-übergreifenden Versionen zusammen, so kommt man nicht selten auf über ein Megabyte.
- Probleme bei der Lizenzierung. Viele Schriftarten die man im Web zum Herunterladen findet stehen unter diversen Lizenzen. Dort durchzusteigen ist anfangs nicht immer ganz einfach und kann im schlimmsten Fall ein böses Schreiben vom Anwalt nach sich ziehen.
Die @font-face Alternative: Google Web Fonts
Google Web Fonts ist im ersten Sinne eine Sammlung von Web-optimierten Schriftarten zur freien Verwendung auf der eigenen Webseite. Doch auf den zweiten Blick steckt noch mehr dahinter: Mit nur wenigen Klicks erhält man zwei Quellcode-Snippets um die Schriftart innerhalb weniger Sekunden einzubinden – ohne auf die oben angesprochenen Falltüren Rücksicht nehmen zu müssen.
In der Übersicht der Google Web Fonts stehen einem diverse Filtermöglichkeiten zum Finden des perfekten Schriftsatzes zur Verfügung. So lässt sich beispielsweise ein sans-serif-Font mit latin-Zeichensatz und fetten Lettern finden. Außerdem erhält man Informationen wie viele Styles (Normal, Bold, Italic) beim jeweiligen Font zur Verfügung stehen und kann sogar eine Life-Preview mit eigenem Content vornehmen.
Hat man sich für eine Schrift entschieden gelangt man über einen Klick auf quick use zur Detail-Ansicht. Falls mehreren Varianten oder Zeichensätze zur Verfügung stehen kann man hier selektieren, welche man auch wirklich benötigt. Großes Kino: In Echtzeit wird beim (de-)selektieren die Auswirkung auf die Ladezeit angezeigt.
Unter Punkt 3. und 4. der Detail-Ansicht findet man dann den wohl größten Vorteil der Google Web Fonts: Die Möglichkeit, die Schriftarten mit nur zwei kurzen Snippets auf der eigenen Webseite einzubetten. Schauen wir uns dazu das erste Snippet am Beispiel der Schriftart Prata genauer an:
Diese Anweisung zum Laden einer CSS-Datei sollte in den <head>-Bereich auf der eigenen Webseite kopiert werden. Wichtig ist, dass die Anweisung noch vor dem Import des eigenen Stylesheets geschieht. Ruft man die externe CSS-Datei direkt im Browser auf, so erhält man ein Ergebnis, welches unserem obigen @font-face – Quellcode sehr ähnlich sieht; nur dass die Drecks-Arbeit in diesem Fall von Google selbst übernommen wird:
Den Quellcode („font-family: ‚Prata‘, serif;„) welchen man auf der Google Web Font Detailseite unter dem Punkt 4. findet, kann man nun nach belieben in der eigenen CSS-Datei verwenden.
Wie man sieht kann man mit den Google Web Fonts relativ flott und unkompliziert externe Schriftarten auf Webseiten einbetten. Neben der exzellenten Integration sind die Filter- und Vorschau-Möglichkeiten ein weiterer großer Pluspunkt. Zum Zeitpunkt des Verfassens dieses Artikels waren 252 Schriftarten hinterlegt – hoffen wir dass das Projekt weiterhin ein Wachstum verzeichnen kann.