Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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?

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Adobe Edge Tools & Services – Neue Tools für Webdesigner | kulturbanause blog
    schrieb am 28.09.2012 um 10:52 Uhr:

    […] anderen Edge Tools zur Verfügung. Der Service basiert auf Typekit und wird in Kooperation mit den Google Webfonts realisiert. Adobe […]

    Antworten
  2. @font-face Bibliothek "Kernest" | kulturbanause blog
    schrieb am 07.05.2011 um 13:53 Uhr:

    […] kurzem habe ich über die neue Google Font Directory berichtet die mittels CSS-Eigenschaft @font-face den Einsatz von Schriften im Web um einiges […]

    Antworten
  3. @font-face Bibliothek “Kernest” | kulturbanause blog
    schrieb am 11.06.2010 um 10:58 Uhr:

    […] kurzem habe ich über die neue Google Font Directory berichtet die mittels CSS-Eigenschaft @font-face den Einsatz von Schriften im Web um einiges […]

    Antworten
  4. Manuel
    schrieb am 25.05.2010 um 00:21 Uhr:

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

    Antworten
    • Jonas
      schrieb am 25.05.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!

      Antworten
  5. Jens Bayer
    schrieb am 21.05.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.

    Antworten
  6. FL4PJ4CK
    schrieb am 20.05.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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →