201020Mai

Google Font API: CSS3-Fonts über Google nutzen

Zur Implementierung von CSS3-Schriftarten über "@font-face" steht mit Typekit eine komfortable (jedoch kostenpflichtige) Möglichkeit zur Verfügung, mit der viele dynamische Schriftbilder zur Auswahl stehen — die Einbettung auf einer Website erfolgt über Typekit-Server. Zuletzt wurde das Beta-Programm von den "Web Fonts" bei Fonts.com gestartet, in dem ebenfalls aus CSS3-Schriftarten gewählt werden kann. Derartige Angebote haben in der letzten Zeit zugenommen, da Schriftarten mit entsprechenden Lizenzen verknüpft sind, um die man sich durch solche Dienste nicht kümmern muss.
Nun bietet auch Google mit der Google Font API und dem Google Font Directory eine schöne Möglichkeit an, mit der sich diverse Schriftarten über Google-Server auf Websites einbetten lassen.

Google Font API

Die Implementierung funktioniert über eine dynamische CSS-Datei, was in etwa so aussieht:

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

Anschließend kann die Schriftart so genutzt werden:

  • h1 { font-family: 'Cantarell', arial, serif; }

In dem Font Preview des Schriftverzeichnisses lassen sich die verfügbaren Fonts ausprobieren und mit Beispieltext begutachten. Mehr über die Funktionsweise findet sich in der Dokumentation. Weiterhin bietet Google mit dem WebFont Loader ein Pendant zu dem Ajax-Loader an, mit dem sich auch mehrere Schriftarten über Google auf einer Website implementieren lassen.
Das Google Font Directory wird sicherlich noch Zuwachs bekommen und insgesamt steht mit dem Projekt von Google eine schöne Möglichkeit zur Verwendung von CSS3-Fonts bereit.

Kommentare

CSS3 Web Fonts schrieb am 24.05.2010 #1

Das ist ja mal praktisch! In welchem Format sind denn die Schriftarten? Denn es gibt ja kein Format, das durchgängig von allen Browsern unterstützt wird. Oder ist das in diesem neuen "Web Open Font Format"?

Matthias schrieb am 27.05.2010 #2

Die Schriftarten werden je nach Browser unterschiedlich ausgeliefert. Unter Internet Explorer werden mit "@font-face" lediglich EOT-Schriftarten unterstützt. Die dynamische CSS-Datei von Google hat eine Browser-Erkennung integriert, so dass für Internet Explorer die gewünschte Schriftart als EOT-Datei zurückgegeben wird. Für alle anderen Browser gibt die CSS-Datei eine Schriftart im TrueType-Format (TTF) aus. Mozillas "WOFF" wird nicht genutzt, aber Firefox versteht auch TTF-Fonts.