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:

1
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

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

1
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.

Ihnen hat dieser Artikel gefallen oder geholfen? Prima! Dann denken Sie doch an mich, wenn Sie eine Webseite benötigen!

Dieser Eintrag wurde veröffentlicht in CSS, Fonts & Typografie und getagged , , , , , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

Ihr Kommentar

Ihre E-Mail-Adresse wird niemals veröffentlicht oder verteilt.

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies und eingebundenen Skripten zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn Sie diese Website ohne Änderung der Cookie-Einstellungen verwenden (Navigation) oder auf "Akzeptieren" klickst, erklären Sie sich damit einverstanden. Dann können auch Cookies von Drittanbietern wie Youtube oder Google gesetzt werden. Wenn Sie das nicht wollen, sollten Sie entweder nicht auf "Akzeptieren" klicken und die Seite nicht weiter nutzen, oder Ihren Browser im Inkognito-Modus betreiben, und/oder Anti-Tracking- und Scriptblocker-Plugins nutzen.

Mit einem Klick auf "Akzeptieren" werden zudem extern gehostete Javascripte freigeschaltet, die weitere Informationen, wie beispielsweise die IP-Adresse an Dritte weitergeben können. Welche Informationen das genau sind liegt nicht im Einflussbereich des Betreibers dieser Seite, das bitte bei den Anbietern (jQuery, Google, Youtube, Amazon, Twitter *) erfragen. Wer das nicht möchte, klickt nicht auf "akzeptieren" und verlässt die Seite.

Wer wer seine Identität im Web schützen will, nutzt Browser-Erweiterungen wie beispielsweise uBlock Origin oder ScriptBlock und kann dann Skripte und Tracking gezielt zulassen oder eben unterbinden.

* genauer: eingebettete Tweets, eingebundene jQuery-Bibliotheken, Amazon Artikel-Widgets, Youtube-Videos, Vimeo-Videos

Schließen