Schöne Fonts fürs Web

Bislang war es nicht ohne weiteres möglich auf Webseiten eigene Fonts zu verwenden. Webbrowser verwenden lediglich die auf dem System installieren Fonts zum Anzeigen von Webseiten. Damit war es, außer über den eher aufwendigen Umweg einer Grafik, oder dem kaum praktizierten bereitstellen eines eigenen Fonts auf dem Server, nicht möglich spezielle Schriftarten zu verwenden.

Auf der diesjährigen Google I/O Konferenz hat Google ihre Google font api vorgestellt. Darüber werden Schriftarten bereitgestellt und können ganz einfach im HTML-Header einer Website eingebunden werden. Die Schrift kann dann einfach per CSS eingebunden und formatiert werden. Aktuelle Browser unterstützen eingebundene Fonts. Google stellt einige Lizenzfreie Fonts zur Verfügung, z.B. Lobster (siehe Screenshot rock ’n roll!). Eine Übersicht gibt es im Google font directory. Es können auch weitere Fonts anderer Web-Font Provider eingebunden werden. Derzeit wir nur der kostenpflichtige Provider Typekit genannt.

Folgende Code-Schnipsel werden zum Einbinden des Lobster Fonts benötigt. Im HTML-Header:

<link href='http://fonts.googleapis.com/css?family=Lobster'  rel='stylesheet' type='text/css'>

Die Formatierung der Schrift mit CSS:

<span style="font-family: 'Lobster', arial, serif; font-size: 30px;">rock 'n roll!</span>

Vor allem im Bezug auf Überschriften und Teaser finde ich die Fonts eine schöne Option. Ich bin gespannt ob diese Möglichkeit angenommen wird und sich etabliert. Die Designer dürften sich jedenfalls freuen.

Über Cedric Weber

Ich schreibe seit Mai 2003 zu Themen rund um das Web2.0, Enterprise2.0, Social Software, Wikis, Weblogs, online Kollaboration, Instant Messaging, sowie Linux / Ubuntu und Apple. Dazwischen findest du Themen aus meinem Alltag - über Glaube und Spiritualität, Fotografie, Musik und vieles andere.

3 Gedanken zu „Schöne Fonts fürs Web

  1. Eigentlich eine sehr feine Sache. Ich würde aber das CSS aber direkt einbauen, nicht verlinken.

    Das erinnert mich auch an den performance Vortrag vom @kliehm beim Webmontag Frankfurt letzte Woche: http://www.slideshare.net/kliehm/performancewmfra

    Letzten beiden slides, Icons als Fonts umsetzen, sehr feine Sache.

    Man müsste es mal professional betreiben, damit diese Spielereien auch wirklich lohnen (ja, Standards und Optimierungen lohnen sich immer, aber Du weißt…).

    Ok, offtopic…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.