Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 21. September 2012

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

Das Google Font Directory hat sich inner­halb eines Jahres quan­ti­ta­tiv ver­mehr­facht und wächst wei­ter. Über 500 Schriftarten erschwe­ren das Auffinden brauch­ba­rer Fonts für das eige­ne Projekt, nicht jede Schrift weiß zu über­zeu­gen. Natürlich ist das zum Teil Geschmackssache. Der Web-Service Best Web Fonts hat eine sub­jek­ti­ve Auswahl der bes­ten Fonts aus dem Google-Dienst zusam­men gestellt und um nütz­li­che Testfunktionen und Einbauhilfen erwei­tert. So lässt sich eini­ges an Zeit spa­ren.

Es gibt nicht nur Google Web Fonts: Reingreifen!

Best Web Fonts – Effekte testen und Code zum Einbau erhalten

Auf Best Web Fonts fin­den inter­es­sier­te Entwickler über 80 Schriftarten aus dem Google Fonts Directory. Dabei han­delt es sich um einen klei­nen, vom Betreiber des Services von Hand aus­ge­wähl­ten Ausschnitt des zur Verfügung ste­hen­den Portfolios. Wenn sich auch über die Wahl des einen oder ande­ren Fonts im Vergleich zu ande­ren, eben­falls ver­füg­ba­ren Fonts strei­ten lies­se, so kann man der klei­nen Auswahl zumin­dest beschei­ni­gen, hier einen reprä­sen­ta­ti­ven Ausschnitt anzu­bie­ten.

Die ver­füg­ba­ren Schriftarten wer­den direkt auf der Website im Echtzeiteinsatz gezeigt. So lässt sich die Tauglichkeit weit bes­ser beur­tei­len, als es mit den recht dürf­ti­gen Bordmitteln im Google Fonts Directory mög­lich wäre. Verschiedene Überschriften, sowie wei­te­re HTML-Elemente, etwa Blockquotes, Listen und Absätze sind mit der gewähl­ten Schriftart dar­ge­stellt. Diese Übersicht ist zwar schön, aber nicht der Hauptvorteil in der Nutzung von Best Web Fonts.


Best Web Fonts: Der Webservice zeigt ver­schie­de­ne Fonts im Einsatz

Der größ­te Nutzen ent­steht durch die ver­füg­ba­ren Einbauhilfen. So wer­den eini­ge Copy & Paste Codes vor­ge­hal­ten. Der grund­le­gen­de Einbau der gewähl­ten Schriftart kann ent­we­der via @import, link href oder mit­tels JavaScript erfol­gen. Alle drei Varianten sind, nebst dem erfor­der­li­chen CSS-Schnipsel, aus­ko­pier­bar.

Noch inter­es­san­ter aller­dings ist die Bereitstellung des CSS-Codes für die 24 ver­schie­de­nen Effekte, die in Echtzeit auf den pro­mi­nent gezeig­ten H-Tag ange­wen­det wer­den kön­nen. Das kopier­ba­re CSS ist als Klasse auf jeden belie­bi­gen Text anwend­bar, inso­fern limi­tiert das Beispiel nicht. Klickt man auf Best Web Fonts die­se Optik zusam­men:


Dieser Texteffekt (obe­rer Pfeil) wur­de durch die­sen Effekt (unte­rer Pfeil) erzeugt

Würde man das fol­gen­de CSS erhal­ten:

.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 erfor­der­li­che Vendor-Prefixes sind bereits berück­sich­tigt. Der geüb­te Entwickler erkennt auf einen kur­zen Blick, wel­che Effekte gege­be­nen­falls auf der Zielplattform nicht funk­tio­nie­ren wer­den. Natürlich sind nicht alle Effekte in allen Browsern unter­stützt.

Abseits der aus­ge­wähl­ten rund 80 Schriftarten auf Best Web Fonts las­sen sich die erstell­ten Implementationshilfen und Codeschnipsel mit gerin­gem Aufwand manu­ell an jeden belie­bi­gen Google Web Font anpas­sen. Deshalb gehört Best Web Fonts in die Bookmark-Sammlung jedes Web-Developers, der eine klei­ne Arbeitserleichterung stets zu schät­zen 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.

Schreibe einen Kommentar

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