Jul 24 2011

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.