Schönere Websites mit Google Web Fonts

Bisher war man beim Designen von Websites bzgl. der Schriftarten auf einige wenige “sichere” Webfonts beschränkt, die auch zuverlässig auf allen Betriebsystemen vorhanden waren und die Website damit in möglichst allen Browser- und Betriebssystemvarianten gleich aussieht.

Seit Mai 2010 bietet Google einen Dienst namens Google Web Fonts. Der Dienst befindet sich zum Erstellungszeitpunkt dieses Artikels offiziell noch in der Betaphase, funktioniert aber schon sehr gut und stabil. Google Web Fonts bietet ein umfangreiches Verzeichnis an Schriftarten, die online in die eigene Website eingebunden und verwendet werden können. Die Schriftarten unterliegen der Open Source Lizenzierung.

Technisch muss lediglich das passende Stylesheet für die gewünschte Schriftart über ein link-Tag im Header eingebunden werden und der neue Font in den eigenen CSS-Selektoren im Attribut font-family verwendet werden. Der grundlegende Trick bei den Google Web Fonts ist, dass der Font beim Laden der Seite online passend zum Browser und Betriebssystem geladen und gesetzt wird und daher nahezu unter jeder Browser- und Betriebssystemkombination funktioniert. Zumindest alle modernen Browser unterstützen damit die Google Web Fonts.

Ein kleiner Nachteil ist allerdings, dass der Font zumindest beim ersten Aufruf der Seite in den Cache geladen werden muss. Die Größen der Schriftarten im Google Font Directory liegen in etwa zwischen 30 kb und 180 kb. Das ist noch akzeptabel.

Welche Schritte sind nötig? Zunächst suchen Sie sich um Google Font Directory die gewünschte Schriftart aus. In unserem Beispiel möchten wir den Font Cabin verwenden. Laden Sie dann im Header Ihrer Webseite möglichst als erstes Stylesheet und vor der ersten JavaScript-Bibliothek das passende Stylesheet über folgende Anweisung:

<link rel="stylesheet" type="text/css" media="all"
href="http://fonts.googleapis.com/css?family=Cabin&subset=latin" />

Über den Parameter family= geben Sie die Schriftart an. Möchten Sie mehrere Schriftarten laden, dann benutzen Sie das |-Zeichen, z.B. “family=Cabin|Ubuntu”.

Zusätzlich können Sie über den :-Operator noch unterschiedliche Styles laden, z.B. “family=Cabin:bold”. Ohne Angabe des Styles wird die normale Variante geladen. Als Styles stehen bold, italic und bolditalic zur Verfügung.

Einige Web Fonts bieten unterschiedliche Zeichensätze, die über den Parameter &subset= angegeben werden, z.B. “family=Cabin&subset=latin”. Ein weiterer möglicher Zeichensatz könnte cyrillic sein. Die möglichen Zeichensätze können Sie der Beschreibung der jeweiligen Schriftart entnehmen.

Um dem Browser jetzt mitzuteilen, dass der neue Font verwendet werden soll, benutzen Sie den neuen Fontnamen wie üblich in den CSS-Selektoren. In unserem Beispiel sieht das so aus:

p { font-family: Cabin,sans-serif; }

Wichtig! Geben Sie unbedingt eine Fallback-Schriftart an, falls der Web Font nicht geladen werden kann. Als Fallback sollten Sie eine Schriftart oder eine Schriftartgattung verwenden, die auf jeden Fall verfügbar ist.

Sicherlich hat das alles jetzt nichts mit Suchmaschinenoptimierung (SEO) oder Suchmaschinenmarketing (SEM) zu tun, aber ich finde das Konzept der Google Web Fonts so interessant, dass es für mich einen Artikel wert ist.

Eine ausführlichere Darstellung finden Sie im Web Font Tutorial von Google.

Dieser Beitrag wurde unter SEO News Blog veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Die Kommentarfunktion ist geschlossen.