Google und die Webfonts

Soeben findet Googles Entwicklerkonferenz I/O statt, auf der technische Neuerungen und Ideen rund ums Web vorgestellt werden. Man kann nun zwar zu Google allgemein hinsichtlich ihrer Datensammelwut in den verschiedensten Bereichen geteilter Meinung sein, abver darum soll es hier nicht gehen. Ebenfalls Fakt ist, dass man bei Google auch immer wieder Novitäten und Kreatives im Bereich Webentwicklung erfindet.

Neueste Beispiele sind die auf der I/O vorgestellten Google Font API und Google Font Directory, die dabei helfen, die Typografie von Webseiten zu verbesser (oder zu verschönern) und es ermöglichen auf Webseiten standardkonform Schriftarten anzuzeigen, die nicht auf dem Rechner des Besuchers vorliegen.

So ziemlich alle aktuellen Browser sind in der Lage Fonts via CSS  von einem fernen Server zu holen, um sie in einer Webseite anzuzeigen. Dabei gab es aber immer wieder technische Probleme, von den gegebenenfalls auftretenden Lizenzrechtlichen Schwierigkeiten und Fallstricken mal ganz abgesehen. Googles Herangehensweise könnte hier Abhilfe schaffen.

Google Font Directory

Das Google Font Directoy ist ein Verzeichnis von frei nutzbaren Schriftarten, die in eigene Webseiten eingebunden werden können (klick).


Bei einem Klick auf den Fonteintrag erhält man weitere Informationen zur gewählten Schriftart und kann sich auch gleich den Code anzeigen lassen, den man einbetten muss, um ihn in eigenen Webseiten einsetzen zu können.

Im Moment finden sich 18 Schriftarten im Verzeichnis, man kann aber sicher davon ausgehen, dass das schnell mehr werden dürften.

Google Font API

Dort wird erläutert, wie man diese Art von Webfonts anwenden und nutzen kann. Das ist sehr einfach.

Im head eines HTML-Dokuments binde ich eine CSS-Datei vom Google-Server ein:

Via CSS kann ich den gewählten Font dann anwenden:

p { font-family: 'Tangerine', serif; font-size: 48px; }

Und schon:

Dies ist ein Absatz in Tangerine

Das ist eine wunderbar einfache Sache, die ansehnlicher Typografie im Web endlich zum Durchbruch verhelfen könnte.

Veröffentlicht in CSS, Fonts & Typografie und verschlagwortet mit , , , , , , .

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert