Navigieren / suchen

Google Webfonts

Google hat vor ein paar Wochen die neue Google Webfonts-Website aufgeschaltet. Aktuell sind es 206 verschiedene Schriftarten welche man gratis verwenden kann. Und das alles so einfach, dass sogar ich als Programmierer eine eigene Schriftart auf die Website bringen kann.

Auf der Startseite kann man die vielen verschiedenen Schriftarten durchstöbern. Es gibt verschiedene Filter um schneller an die gewünschte Schriftart zu kommen. Bei jeder Schriftart können alle Zeichen angezeigt werden. Dazu wird ein PopUp geöffnet auf welcher die Zeichen in der gewählten Schrift darstellt.

Collections

Man sollte ja zwar nicht zu viele Schriftarten auf einer Website verwenden, aber für das wären die Collections gedacht. Man kann die gewünschten Schriftarten zu einer Collection zusammenstellen. Im Review-Modus (Rechts unten) kann man die Schriftarten nochmals gegenüberstellen. Sogar ein kleiner „Test-Drive“ existiert. Bei dem man Titel und verschiedene Absätze in den Schriften 1:1 darstellen kann, ohne es zuerst auf der Eigenen Website testen zu müssen.

Use

So und jetzt kommen wir zum einfacheren Teil, das einbinden auf einer Website. Unter Use können im ersten Punkt die verschiedenen Schriftarten aus der Collection gewählt werden. Ganz praktisch wird auf der rechten Seite mit so einer Art Tacho angezeigt wie viel länger die Website braucht zum Laden. Also man sollte mit den Schriften sparsam umgehen, ansonsten wird nur die Site unnötig langsam.
Im zweiten Abschnitt können noch die Zeichensätze ausgewählt werden und im dritten Teil werden drei verschiedene Einbindungsvarianten mit Code bereitgestellt. Man kann wählen zwischen einem Normal Link-Tag, einem @import oder per JavaScript. Und zu guter Letzt wird hat es noch CSS-Code wie man die Schriftart einbindet. Also es kann fast nichts schief gehen.

Kommentare

Eichruss

Die Webfonts von Google sind endlich eine gescheite Alternative zu Typekit und ähnlichen Anbietern. Der grösste Vorteil in meinen Augen liegt darin, dass Google die Schriften zum Download anbietet, was zur Bearbeitung von Screendesigns eigentlich unumgänglich ist. Gute Sache!

Vielleicht nicht das Thema betreffend, aber trotzdem ein Tipp: Schriften unbedingt in allen Browsern testen. Moderne Varianten haben zwar in der Regel ein anständiges Schriftenrendering, aber es gibt ja halt noch immer den guten, alten IE…

Bastian

Auf meinem Handy sieht dein Blog irgendwie kaputt aus.

Wesc Bongo Kopfhoerer

Ja, ich vermisse hier ebenfalls den like Button. Oder uebersehen?

Nischi

Das muss ich bei Gelegenheit mal anschauen. Vielen Dank für den Hinweis.

Hinterlasse einen Kommentar

Name*

E-Mail* (wird nicht veröffentlicht)

Webseite