Web-Fonts mit Google Font Directory API
Google hat einen neuen Online-Dienst namens Font-Directory Beta gestartet. Dieser Service ermöglicht es Webdesignern individuelle Schriftarten in Websites zu verwenden auch wenn diese nicht zu den wenigen systemübergreifenden Schriftarten gehören.
Schriften stellen im Internet leider nach wie vor ein echtes Problem in der Gestaltung dar. Der Grund liegt darin, dass eine Schriftart nur dann korrekt angezeigt wird sofern der Besucher den Font auch installiert hat. Ist dies nicht der Fall so wird eine alternative Schriftart geladen was zwangsläufig zu Fehldarstellungen führt.
Zwar bieten JavaScript- und Flash-basierte Lösungen wie Cufón oder sIFR eine passable Alternative aber Googles neue API verspricht über kurz oder lang ein echter Hit zu werden.
Ich habe das neue Tool einmal ausprobiert.
Google nutzt doch nur @font-face
Im Grude genommen funktioniert das Ganz so: Google bedient sich der CSS-Eigenschaft @font-face
und bindet die Schriften auf die gleiche Weise ein wie man es bisher immer schon selbst im Stylesheet erledigen konnte.
@font-face {
font-family: 'Reenie Beanie';
font-style: normal;
font-weight: normal;
src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0') format('truetype');
}
Der Vorteil der Google Font Directory besteht darin, dass Google die Schrift zur Verfügung stellt und Ihr somit Bandbreite auf der eigenen Seite einspart. Darüber hinaus sind die Google Systeme natürlich rasend schnell und quasi immer erreichbar.
Als letztes sollte erwähnt werden, dass eine geringe Wahrscheinlichkeit besteht, dass die aufgerufene Schriftart bereits beim User im Cache vorhanden ist. Ist dies der Fall wirkt es sich natürlich ebenfalls positiv auf die Ladezeiten aus. Im Gegenzug wird allerdings ein HTTP-Request mehr verursacht.
Wie funktioniert es?
Eine Schriftart mittels der neuen Google Font API in die eigene Seite einzubinden geht kinderleicht. Zunächst fügt im head
der Seite die entsprechende API ein. Die mit XXXXX markierte Passage muss später durch den Namen der Schriftart ersetzt werden.
<link href="http://fonts.googleapis.com/css?family=XXXXX" rel="stylesheet" type="text/css" >
Anschließend erweitert Ihr Eure CSS-Datei lediglich um einige Zeilen Code um die soeben per API eingebettete Schrift einem Selektor zuzuweisen.
body {
font-family: "XXXXX", serif;
font-size: 28pt;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
word-spacing: 0;
line-height: 1;
}
Beispiel
Das folgende Beispiel soll einmal zeigen wie einfach alles funtktioniert. Kopiert lediglich den nachfolgenden Code in ein leeres HTML-Dokument oder schaut Euch das Beispiel an.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css" >
<style>
body {
font-family: "Reenie Beanie", serif;
font-size: 28pt;
font-style: italic;
font-weight: 700;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
word-spacing: 0;
line-height: 1;
}
</style>
<title>kulturbanause blog | Google Font Directory API</title>
</head>
<body>
Willkommen auf kulturbanause.de!
</body>
</html>
Browsersupport
Aktuell funktioniert das System laut Google in folgenden Browsern:
- Google Chrome: version 4.249.4+
- Mozilla Firefox: version: 3.5+
- Apple Safari: version 3.1+
- Microsoft Internet Explorer: version 6+
Es funktioniert nicht auf folgenden Systemen:
- iPhone
- iPad
- iPod
- Android
Online-Tools und Fazit
Google bietet einige Hilfestellungen im Umgang mit der Google Font Directory API. Nachteilig ist allerdings dass bisher nur sehr (!) wenige Schriftarten angeboten werden. Wenn das Format angenommen wird – und davon gehe ich im Moment einfach mal aus – dann wird sich die Directory allerdings sicher schnell mit diversen Schriftarten füllen.
Was haltet Ihr von dieser Möglichkeit Schriften einzubinden? Habt Ihr bisher weitestgehend auf „Sonderschriften“ verzichtet oder habt Ihr mit Cufón oder sIFR gearbeitet?
[…] anderen Edge Tools zur Verfügung. Der Service basiert auf Typekit und wird in Kooperation mit den Google Webfonts realisiert. Adobe […]
[…] kurzem habe ich über die neue Google Font Directory berichtet die mittels CSS-Eigenschaft @font-face den Einsatz von Schriften im Web um einiges […]
[…] kurzem habe ich über die neue Google Font Directory berichtet die mittels CSS-Eigenschaft @font-face den Einsatz von Schriften im Web um einiges […]
Das bedeutet also dass jeder Otto ohne selbst eine Lizenz für ein Font zu besitzen diese verwenden kann / darf?
@Manuel: Ich denke nicht. Vielleicht ist dies auch der Grund warum es bisher erst wenige Schriften gibt. Soweit ich informiert bin reicht auch nicht nur eine Lizenz der Schrift; es muss auch generell erlaubt sein den Font überhaupt für Web Embedding nutzen zu dürfen.
Wenn jemand mehr Details zu diesem Thema hat – nur her damit!
Sehe das ähnlich wie Nico. Da der Markt für Mobilgeräte sich auch flott weiterentwickelt, wird das wohl in weniger als einem Jahr Standardrüstzeug eines jeden Webdesigners werden. Selbst wenn nicht, kann man ja nach wie vor für eben diese Alternativen anbieten.
Naja, im Prinzip ist es ja nichts neues was Google da anbietet. Aber der unkomplizierte Einbau und die Tatsache, dass sich ein Unternehmen wie Google um das Font Embedding auf der eigenen Seite kümmert macht die ganze Sache doch schon sehr attraktiv.
Für sIFR und Co. sehe ich eigentlich seit @font-face keine große Zukunft mehr. @font-face bietet eine wesentlich sauberere Lösung an und die Handhabung ist zusätzlich auch noch um Längen einfacher, besonders jetzt mit der Google Font Directory API. Da sehe ich eigentlich keinen Grund, mich noch mit Flash oder Javascript abzurackern (außer dass der Browsersupport eben noch mehr als dürftig ist).
LG, Nico