kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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?

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

7 Kommentare

  1. FL4PJ4CK

    Verfasst am 20. Mai 2010 um 21:37 Uhr.

    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

  2. Jens Bayer

    Verfasst am 21. Mai 2010 um 11:11 Uhr.

    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.

  3. Manuel

    Verfasst am 25. Mai 2010 um 0:21 Uhr.

    Das bedeutet also dass jeder Otto ohne selbst eine Lizenz für ein Font zu besitzen diese verwenden kann / darf?

    • Jonas

      Verfasst am 25. Mai 2010 um 21:24 Uhr.

      @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!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.