Dieter Petereit 21. September 2012

Best Web Fonts: Auswahl- und Einbauhilfen für die besten Google Web Fonts

Das Google Font Directory hat sich innerhalb eines Jahres quantitativ vermehrfacht und wächst weiter. Über 500 Schriftarten erschweren das Auffinden brauchbarer Fonts für das eigene Projekt, nicht jede Schrift weiß zu überzeugen. Natürlich ist das zum Teil Geschmackssache. Der Web-Service Best Web Fonts hat eine subjektive Auswahl der besten Fonts aus dem Google-Dienst zusammen gestellt und um nützliche Testfunktionen und Einbauhilfen erweitert. So lässt sich einiges an Zeit sparen.

Es gibt nicht nur Google Web Fonts: Reingreifen!

Best Web Fonts – Effekte testen und Code zum Einbau erhalten

Auf Best Web Fonts finden interessierte Entwickler über 80 Schriftarten aus dem Google Fonts Directory. Dabei handelt es sich um einen kleinen, vom Betreiber des Services von Hand ausgewählten Ausschnitt des zur Verfügung stehenden Portfolios. Wenn sich auch über die Wahl des einen oder anderen Fonts im Vergleich zu anderen, ebenfalls verfügbaren Fonts streiten liesse, so kann man der kleinen Auswahl zumindest bescheinigen, hier einen repräsentativen Ausschnitt anzubieten.

Die verfügbaren Schriftarten werden direkt auf der Website im Echtzeiteinsatz gezeigt. So lässt sich die Tauglichkeit weit besser beurteilen, als es mit den recht dürftigen Bordmitteln im Google Fonts Directory möglich wäre. Verschiedene Überschriften, sowie weitere HTML-Elemente, etwa Blockquotes, Listen und Absätze sind mit der gewählten Schriftart dargestellt. Diese Übersicht ist zwar schön, aber nicht der Hauptvorteil in der Nutzung von Best Web Fonts.


Best Web Fonts: Der Webservice zeigt verschiedene Fonts im Einsatz

Der größte Nutzen entsteht durch die verfügbaren Einbauhilfen. So werden einige Copy & Paste Codes vorgehalten. Der grundlegende Einbau der gewählten Schriftart kann entweder via @import, link href oder mittels JavaScript erfolgen. Alle drei Varianten sind, nebst dem erforderlichen CSS-Schnipsel, auskopierbar.

Noch interessanter allerdings ist die Bereitstellung des CSS-Codes für die 24 verschiedenen Effekte, die in Echtzeit auf den prominent gezeigten H-Tag angewendet werden können. Das kopierbare CSS ist als Klasse auf jeden beliebigen Text anwendbar, insofern limitiert das Beispiel nicht. Klickt man auf Best Web Fonts diese Optik zusammen:


Dieser Texteffekt (oberer Pfeil) wurde durch diesen Effekt (unterer Pfeil) erzeugt

Würde man das folgende CSS erhalten:

.effect{
-webkit-perspective: 350;
color: #00A0D9;
-webkit-transition: -webkit-transform .1s ease-in;
-webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
text-shadow: #A8C0D8 0 0 1px, #9EB6CC 0 4px 3px, #8DA4B4 0 9px 3px, #7B92A8 0 12px 1px, rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.9) 0 20px 10px, rgba(0,0,100,0.2) 0 15px 80px }

Etwa erforderliche Vendor-Prefixes sind bereits berücksichtigt. Der geübte Entwickler erkennt auf einen kurzen Blick, welche Effekte gegebenenfalls auf der Zielplattform nicht funktionieren werden. Natürlich sind nicht alle Effekte in allen Browsern unterstützt.

Abseits der ausgewählten rund 80 Schriftarten auf Best Web Fonts lassen sich die erstellten Implementationshilfen und Codeschnipsel mit geringem Aufwand manuell an jeden beliebigen Google Web Font anpassen. Deshalb gehört Best Web Fonts in die Bookmark-Sammlung jedes Web-Developers, der eine kleine Arbeitserleichterung stets zu schätzen weiß!

Links zum Beitag:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.