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.
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…
Vielen Dank für den Hinweis. Solche Kleinigkeiten werden sofort optimiert. Habe ja schon eine Runde Tuning hinter mir. (https://m.zung.us/2009/10/17/tuning-mzungus-performance-und-feeds/) Allerdings sind noch viele Wünsche seitens meines Themes (was ich ja eh mal ändern wollte wie alle Blogger die ich kenne ;-)) offen. Danke für den Link zu Slideshare.
Hier gerade mal angewendet: http://www.jasonlauphotography.com
font-family: ‚Nobile‘, arial, serif;