freeQnet-Logo
freeQnet

Kurztipp Google Font API schicke Web-Schriftarten für alle!

Google hält diese Tage seine Hausveranstaltion Google I/O 2010 ab und haut eine tolle Neuankündigung nach der anderen raus. Neben so großen Dingen wie den genialen Features der Android-Version 2.2 namens Froyo fiel mir vor allem die gestern auch gleich frisch live gegangene Google Fonts API ins Auge.

Kurz gesagt ermöglicht die Fonts API jedem Webseiten-Betreiber die von Google bereit gestellten Schriftarten auf seiner Seite zu verwenden, ohne dass der Anwender diese auf seinem Rechner installiert haben muss. Mit wenigen Zeilen CSS befreit man sich von der Einengung der wenigen sicheren Schriften, ohne auf JavaScript, Grafiken oder Flash setzen zu müssen. Der Text bleibt also markier- und kopierbar! Als I-Tüpfelchen funktioniert das übrigens in allen großen Browsern – inklusive IE6! Google hat sogar die Performance im Griff, wie eine stark besuchte Seite wie das Smashing Magazine beweist.

Wie kann man diese neuen Schriftarten denn nun nutzen? Ganz einfach: es sind im Grunde nur zwei Zeilen CSS dazu nötig. Zu aller erst sucht man sich eine Schrift aus dem Katalog aus. Diese bindet man dann als Link im Head-Bereich seiner HTML-Seite ein. Für die “Yanone Kaffeesatz” sieht das z.B. so aus (man beachte das + statt des Leerzeichens):

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

Dieses Einbinden muss vor allem vor dem Aufruf der eigenen CSS-Datei machen, damit man darin darauf zugreifen kann! Nun kann man die Schrift ganz einfach innerhalb seiner CSS-Datei über den CSS-Befehl “font-family” einbinden:

1
font-family: 'Yanone Kaffeesatz', serif;

Das geht an jeder Stelle, an der man üblicherweise mit diesem Befehl arbeitet, also z.B. für Überschriften, Absätze oder auch den ganzen Body der Seite. Natürlich kann man auf die Schrift dann auch alle bekannten weiteren Befehle wir font-size, font-weight etc verwenden, um sie zu manipulieren. So wird es zum Kinderspiel, schöne Schriftarten einzubetten, ohne die vielen doch eher suboptimalen Lösungen über Flash oder Grafikdateien verwenden zu müssen. Wer es noch etwas einfacher will, kann sich sogar über ein tolles kleines Vorschau-Formular die Schrift inklusive aller Einstellungen nach Wunsch zusammenklicken und dann einfach den Code dazu kopieren! Weiuterführende Infos bietet auch das Tutorial von Google!

Ganz ohne Nachteile kommt diese Technik allerdings leider nicht aus, auch wenn diese eher zu vernachlässigen sind. In sehr großen Varianten sind die Schriften relativ grobpixelig. Antialiasing funktioniert damit derzeit noch nicht richtig. Außerdem ist die Auswahl noch auf relativ wenige Open-Source-Schriften beschränkt, dürfte sich aber vermutlich bald vergrößern. Zu guter letzt funktioniert das System natürlich auch nicht überall. Zwar sind Firefox, Safari, Chrome, Opera und der IE ab Version 6 dabei, einige mobile Browser werden aber sicher nicht damit klarkommen.

Davon abgesehen ist das aber ein großartiger neuer Service, den Google da vorgestellt hat. Ich wage sogar zu behaupten, dass darin die Zukunft liegt: Zentrale Server, von denen die Webseitenbetreiber sich die gewünschten Schriften einbetten können. Das könnte endlich der ersehnte Durchbruch für Webfonts sein, weg von dem ewigen Verdana/Arial/Times-Einerlei im Web!

Trackbacks/Pingbacks

1

Verbesserte Suchfunktion, Pluginkarussell, Design…

Ver­bes­serte WordPress-Suche Die Such­funk­tion, die Word­Press mit­bringt, zählt sicher nicht zu den bes­ten. Daher habe ich mich durch einen Arti­kel bei Elma­stu­dio dazu ani­miert gefühlt einige der vor­ge­schla­ge­nen Dinge umzu­set­zen. Das Plu­…

gesendet von Spontis
Every mix tape tells a story. Put them together, and they add up to the story of life.

Rob Sheffield

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de