Bisher waren Webdesigner in der Auswahl von Schriften ziemlich eingeschränkt. Da es keinen praktikablen Weg gab um eigene Schriften in eine Webseite einzubinden, war man bei der Erstellung einer Webseite auf die Schriften beschränkt, die der User auf seinem Rechner installiert hatte.
Daher gibt es heute im Internet einige de facto Standard Schriftsätze, welche gefühlte 99% aller Webseiten verwenden. Dazu gehören die allseits beliebte Arial, Verdana oder Times New Roman. Die Comic Sans betrachte ich nicht als vollwertige Schrift, daher führe ich Sie hier nicht auf 😉
Lange Zeit war das auch genug um eine Webseite zu bauen, jedoch wuchs mit der Zeit der Drang eigene Schriften zu verwenden um den Auftritt im Internet zu individualisieren.
Es gab viele Ansätze dieses Problem zu lösen, zu Beginn natürlich Bilder, welche statt des Textes angezeigt wurden, das sogenannte Image-Replacement. Diese Technik ist jedoch nur für kleinere Texte sinnvoll, die sich möglichst nicht ändern, da in diesem Fall natürlich jedes Mal ein neues Bild erstellt werden muss. Daher eignet sich diese Technik eher für kleinere statische Seiten oder Überschriften.
Die nächste Lösung war da schon um einiges ausgereifter, SIFR (Scalable Inman Flash Replacement), ursprünglich entwickelt von Mike Davidson der seine Lösung auf einer Technik von Shaun Inman aufbaute, welche es ermöglicht Text „on the fly“ mit Flash Filmen auszutauschen.
Dieser Ansatz brachte aber seine ganz eigenen Probleme mit und war noch immer recht unflexibel was CSS Angaben wie Schriftweite, Schrifthöhe oder Zeichenabstand anging. Abgesehen davon, dass das Flashplugin zwingend notwendig ist damit diese Technik funktioniert, ist die Einbindung einer Schrift mit einem gewissen Aufwand verbunden und die Ladezeit einer Seite erhöht sich natürlich auch.
Eine weitere Methode verwendet PHP um Bilder dynamisch auf dem Server zu erzeugen und statt dem Text anzuzeigen. Also im Grunde eine dynamisches Image-Replacement, das einem die Arbeit abnimmt das Grafik Programm zu öffnen. Doch auch diese Lösung brachte ein paar Limitationen mit sich, welche die Verwendung impraktikabel machen. So war es beispielsweise nicht möglich, IDs oder Klassen zu benutzen oder den Text zu markieren.
Google Font API
Nun hat sich unser allseits beliebter Suchmaschienenbetreiber Google an eine neue Lösung gewagt. Die von Google angebotene Font-API verlangt nur eine zusätzliche Zeile im <head> Bereich der Seite.
<link rel=“stylesheet“ href=“http://fonts.googleapis.com/css?family=Tangerine“>
Interessant ist im Grunde nur der letzte Teil hinter dem Fragezeichen „family=Tangerine“ welches die zu verwendende Schrift angibt, in diesem Fall Tangerine.
Nun ist es möglich im CSS eine normale Font-Family Angabe zu machen und schon wird die neue Schrift verwendet.
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
Diese Methode funktioniert schon sehr gut und Google übernimmt dabei nervige Browserweichen, die es natürlich auch hier geben muss. Ein paar kleine Einschränkungen gibt es natürlich auch hier. Zurzeit kann man nur die von Google angebotenen Schriften verwenden, die in der Auswahl noch ein bisschen eingeschränkt sind. Man kann zwar auch die von Google ebenso angebotenen Google Font Loader einbauen und damit theoretisch eigene Schriften verwenden, dies ist aber in meinen Augen noch nicht wirklich praktikabel.
Bei allen eigenen Schriften gibt es ein Problem mit den Lizenzen, da bisherige Schriften meistens nicht für die Verwendung im Internet Lizensiert sind. Die Schriften aus Googles Font Directory sind jedoch ohne Bedenken oder Einschränkungen nutzbar.
Ausblick
Die Google API verwendet im Grunde die @font-face Angabe, die mit CSS3 kommen soll. Bis auf den lieben IE wird diese Angabe auch von allen Browsern schon unterstützt. Sollte der IE9 wirklich das halten was er verspricht (Finger kreuzen) dann werden wir sogar in ca. 10 Jahren in der Lage sein die font-face Angabe exklusiv zu nutzen.
2 Kommentare
Andi schrieb am 22. September, 2010 @ 11:10
Ich finde die Google Font API auf jeden Fall etwas sehr schönes in ein Schritt in die richtige Richtung. Es wird auf jeden Fall spannend was uns in den nächsten Jahren hier erwarten wird.
Anonymous schrieb am 22. September, 2010 @ 19:52
Schade nur, das die Darstellung zum Teil darunter leidet – d.h. Schriften werden unscharf oder schlecht lesbar dargestellt.