Die Google Web Fonts: Beliebte Schriften und praktische Tipps

Die Entwicklung der kostenlosen Web Fonts von Google geht schnell voran, und im Dezember sind noch einmal über 20 neue Schriften ins Font-Directory aufgenommen worden. Darunter einige sehr hochwertige Free-Fonts, z.B. die Ubuntu-Schriftfamilie. Und neben den neuen Schriften sind seit unserem letzten Artikel „Die kostenlosen Web Fonts der Google Font API nutzen“ auch noch einige neue Funktionen zum Sortieren der Schriften im Directory dazu gekommen. Zeit also für ein Update zu den praktischen Google Fonts.

1. Was sind Google Web Fonts?

Mit den Google Web Fonts hast du die Möglichkeit eine ganze Reihe von Schriften auf deiner Webseite zu nutzen, ohne dass du diese auf deinen eigenen Server hochladen oder über ein @font-face Kit (z.B. von Fontsquirrel) selbst aufwendig einbinden musst.

Du musst lediglich, die für dein Design benötigten Schriften und Schriftstile über einen Code-Schnipsel einbinden (hier die Erklärung zur Verwendung der Google Fonts). Sobald deine Webseite aufgerufen wird, werden die Schriften dann über den Google-Server geladen. Mit Hilfe des von Google und Typekit (dem derzeit größten Anbieter einer kostenpflichtigen Web Font Library) entwickelten Web Font Loader (einer JavaScript-Bibliothek) kannst das Ladeverhalten deiner Schriften sogar noch gezielter beeinflussen.

Ein großer Vorteil von Web Fonts, besonders im Vergleich zur Verwendung von Images, ist die so verbesserte Ladezeit. Außerdem können mit den Web Fonts eine viel breitere Vielzahl von Schriften unkompliziert genutzt werden, und auch moderne CSS3-Eigenschaften (wie text-shadow oder gradients) können verwendet werden.

2. Neue Features im Google Font Directory

Um die Schriften im Google Font Directory zu sortieren, gibt es inzwischen die neuen, praktischen Filter-Optionen.

Google Web Fonts

Du kannst die Schriften zum einen nach den Schriftklassen Serif, Sans-serif, Display (dekorative Fonts, besonders für Logos oder Überschriften geeignet) und Handwriting filtern.

Daneben gibt es noch die Möglichkeiten die Web Fonts alphabetisch, nach Einstellungsdatum, Trend, Beliebtheit und Anzahl von Schrift-Varianten zu sortieren.

Eine zusätzliche Option ist das Filtern nach kyrillischen, griechischen, Khmer und lateinischen Schriften. Mit einem kleinen, blauen Symbol in der Schriften-Liste sind die zur Verfügung stehenden Schriften auch noch einmal markiert.

Unter Download the Font in der Einzelansicht der Schriften findest du jetzt neben dem Download-Button auch noch einen Spenden-Button. Wenn du möchtest, kannst du den jeweiligen Font-Designer hier mit einer Spende unterstützen. Da alle Schriften im Google Fonts Directory kostenlose Schriften sind, ist dies für die Verwendung der Schrift aber nicht notwendig. Weiter Infos zur Spenden-Option findest du in den Google Fonts FAQs.

3. Die beliebtesten Google Web Fonts vorgestellt

Inzwischen sind schon eine ganze Reihe Web Fonts im Google Font Directory eingestellt. Daher möchte ich die beliebtesten Font hier etwas genauer vorstellen.

Ubuntu

– Die kostenlose Font-Familie des Open Source Betrieb-Systems Ubuntu.

Google Web Fonts
Auch auf der Ubuntu-Webseite gibt es die Ubuntu-Schrift im Einsatz zu sehen.

The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens.

Seit Dezember 2010 kannst du auch die Ubuntu Schrift-Familie über die Google Font API nutzen. Ubuntu ist in den vier Varianten normal, italic, bold und bold italic verfügbar.

Droid Sans

– Eine beliebte serifenlose, fürs Web optimierte Schrift von Steve Matteson.

Google Web Fonts

Droid Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance.

Droid Sans ist die derzeit beliebteste Schrift der Google Web Fonts. Du kannst die Schrift in den Varianten normal und bold nutzen. Droid Sans ist extra für die Verwendung im Web entwickelt worden, und eignet sich besonders gut für Fließtexte.

Droid Serif

– Eine fürs Web optimierte, angenehm lesbare Serifen-Schrift designt von Steve Matterson.

Google Web Fonts

The Droid Serif font family features a contemporary appearance and was designed for comfortable reading on screen.

Die Droid Serif gibt es in den Varianten normal, italic, bold und bold italic. Die angenehm lesbare Serifen-Schrift eignet sich besonders gut für Überschriften und Fließtexte von Webseiten.

Yanone Kaffeesatz

– Eine von Jan Gerner gestaltete Free-Font.

Google Web Fonts

Its Bold is reminiscent of 1920s coffee house typography, while the rather thin fonts bridge the gap to present times.

Yanone Kaffeesatz eignet sich meiner Ansicht nach besonders für Webseiten-Slogans oder größere Überschriften. Die Schrift gibt es in den font-weights 200, 300, 400 und 700.

Vollkorn

– eine 2005 entwickelte Schrift des Typografen und Designers Friedrich Althausen.

Google Web Fonts

It intends to be a quiet, modest and well working text face for bread and butter use. Unlike its examples in the book faces from the renaissance until today, it has dark and meaty serifs and a bouncing and healthy look.

Vollkorn ist eine Serifenschrift, die sich sowohl für den Fließtext, als auch für Überschriften sehr gut eignet. Es gibt die vier Schrift-Varianten normal, italic, bold und bold italic zur Auswahl. Auf der Webseite von Friedrich Althausen kannst du dir Vollkorn im Einsatz anschauen.

Natürlich sind diese Schriften nur eine kleine Auswahl, und deiner Kreativität sind bei der Verwendung der Google Web Fonts keine Grenzen gesetzt. Viele der Schriften, die zwar nicht unbedingt für Fließtexte geeignet sind, könnten zum Beispiel im Webseiten-Logo zum Einsatz kommen.

4. Nützlich Infos zur Verwendung der Google Fonts

Unterstützung mobiler Geräte

Alle Google Web Fonts unterstützen inzwischen die mobilen Geräte mit den Plattformen Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Weitere Infos zum Support der mobilen Geräte kannst du im Artikel „Web fonts go Mobile“ auf dem Google Web Fonts Blog nachlesen.

Browser-Support

Natürlich werden die Web Fonts auch von allen modernen Browsern unterstützt:

– Chrome: 4.249.4+
– Firefox: 3.5+
– Safari: 3.1+
– Opera: 10.5+
– Internet Explorer: 6+
(Quelle: Google Web Fonts FAQs)

Fallback-Schrift im CSS bestimmen

Auf alle Fälle solltest du immer eine Fallback-Schrift in deinem Stylesheet angeben. Dazu kannst du neben Web-safe Fonts, wie Arial für eine Sans-serif Schrift, auch die allgemeingültigen CSS-Werte serif für eine Standard-Serifenschrift (Times New Roman, Georgia), sans-serif für eine standardmäßige serifenlose Schrift (Arial, Verdana) oder monospace für eine Schriftart, in der alle Buchstaben eine einheitliche Breite haben (Courier) nutzen.
(Quelle: W3C Editors Draft Fonts)

Den Web Fonts Loader nutzen

Was in dem kurzen Moment des Ladens der Web Fonts in den Browsern angezeigt wird (nur bei einer sehr langsamen Internet-Verbindung sichtbar), ist nicht einheitlich geregelt. In Safari und Chrome werden leere Zeichen angezeigt, Firefox lädt dagegen erst die angegebene Fallback-Schrift hoch, und wechselt diese zur Google Web Fonts, sobald das Laden abgeschlossen ist.

Um diesen Vorgang besser beeinflussen zu können, kannst du die JavaScript-Bibliothek Web Font Loader nutzen. Eine ausführliche Anleitung zur Verwendung des Scripts mit Anwendungsbeispiel findest du in der Google Font API Dokumentation.

5. Weitere hilfreiche Ressourcen

Wie gefallen dir die bisher integrierten Schriften der Google Font API? Hast du weitere Tipps oder Fragen zur Verwendung der Web Fonts, und wie schätzt du das Angebot der Google Web Fonts im Vergleich zu kostenpflichtigen Anbietern wie z.B. Typekit ein? Über dein Feedback freue ich mich sehr!

19 Kommentare

  1. Ihr macht einfach eine wertvolle Arbeit. Schaue immer wieder gerne auf eure Seite und es ist jedesmal etwas dabei. Weiter so und Danke!

  2. Hallo Ellen,

    wieder ein super Artikel.. Danke!!
    Ich experimentiere selbst gerade mit dem Einbinden weiterer Schriften, besonders mit dem WebFont Loader. Die Library bietet wirklich sehr detaillierte Kontrolle über den Ladevorgang. Das Angleichen dieses Vorgangs über alle unterstützten Browser hinweg besonders interessant.
    Das Beispiel von Google (http://code.google.com/intl/de-DE/apis/webfonts/docs/webfont_loader.html#Example) wonach sich alle modernen Browser wie der Firefox verhalten und den Text zunächst mit den Fallback-Schriften darstellen, geht meiner Ansicht nach aber eher in die falsche Richtung. Das Phänomen wird auch als „flash of unstyled text“ bezeichnet – und wer will das schon, wo es doch gerade um gestylten Text geht?! :)
    Ich habe das Beispiel also mal kurz umgeschrieben.. Firefox verhält sich nun wie der Rest der Welt:

    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script type="text/javascript">
         WebFont.load({
           google: {
             families: ['Droid Sans']
           }
         });
    </script>
    <!-- <noscript><link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css' /></noscript> -->
    <style type="text/css">
         /* Definition der Schriften inkl. Fallback-Fonts im Stack.
         Funktioniert auch bei deaktiviertem JavaScript! 'Droid Sans' ist dann einfach nicht verfügbar, die Fallback-Fonts werden verwendet und die folgenden Klassen-Selektoren laufen einfach ins Leere. */
         h1 {
           font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
         }
         /* Element während dem Ladevorgang externer Schriften ausblenden.
         Verhindert die kurzzeitige Textdarstellung ohne externe Schrift (sog. 'flash of unstyled text', Firefox-Standardverhalten für alle Browser) */
         .wf-loading h1 {
           visibility: hidden;
         }
         /* Blendet Element ein, sobald der Ladevorgang erfolgreich abgeschlossen wurde oder fehlgeschlagen ist.
         Wenn erfolgreich, wird die externe Schrift verwendet. Wenn nicht (Ladefehler, TimeOut nach 5 Sek.), kommen die Fallback-Fonts zum Einsatz. */
         .wf-active h1, .wf-inactive h1 {
           visibility: visible;
         }
         /* Bei mehreren externen Schriften kann Aus-/Einblenden für jede Schrift separat gesteuert werden.
         z.B.: .wf-droidsans-n4-loading, .wf-droidsans-n4-active, .wf-droidsans-n4-inactive [vgl. WebFont Loader Doku]
         ggf. sinnvoll, da .wf-active bereits angewendet wird, sobald nur eine der externen Schriften geladen wurde. Weietere, noch nicht geladene werden also wieder kurzzeitig mit den Fallback-Fonts angezeigt. */
    </style>
    </head>
    <body>
    <h1>Diese Überschrift wird während des Ladevorgangs der externen Schriften ausgeblendet.</h1>
    </body>
    </html>
    

    Das Wichtigste steht in den Code-Kommentaren.. Ich habe den WebFont Loader hier nicht asynchron eingebunden, um den Code möglichst einfach zu halten, tut rein funktional aber nichts zur Sache. Wenn es auch bei deaktiviertem JavaScript schöne Schriften geben soll, einfach den Noscript-Tag auskommentieren; das wirft zwar jede Validierung über den Haufen, funktioniert aber :)

    Vielleicht hast du ja eine Idee, wie das noch besser zu lösen wäre!

    Einen lieben Gruß,
    David

  3. Wow Klasse ich glaub die Google Fonts werde ich gleich mal auf meinem Blog testen. Hab schon davon gehört allerdings noch nie wirklich getestet. Nach diesen Artikel wird das wohl bald passieren.

    Danke für die Infos.

  4. Dankeschön auch für diesen Artikel – du merkst, ich mach mich hier grad schlau :)

    PS: Unter 5. der 2. Link geht nicht, fehlt ein „h“ ganz vorne

  5. Birgit Moewenhaus 25. Juli 2011

    Netter Artikel, toll wäre es, wenn jemand mal ein paar Praxisbeispiele geben würde, wie Schriftartenpaare, die sich besonders gut eignen, oder Links zu Seiten, die Google Fonts verwenden.

    Gruß, Birgit

  6. A. Salinger 3. August 2011

    Das Einbinden klappt schnell und unkompliziert. ABER: mir macht die fehlerhafte Darstellung im FF5 und IE8 noch erhebliche Sorgen: die Unterlängen sind abgeschnitten („g“) und das kleine „a“ist immer eteas größer als die restlichen Minuskeln. Woran könnte das liegen?

    • hallo „A. Salinger“,

      ich habe auch das problem – hast Du es schon loesen koennen?
      bei wird auch der untere bogen vom (»g«) abge­schnitten ;(

      g.mike

      • Das mit dem abgeschnittenen g und p ist bei mir in Chrome besonders sichtbar. Die line-height zu verändern hilft auch nix.
        Wäre super wenn hier noch Hinweise kämen! Danke!

        • Versuch es mal mit einer größeren font-size. Das hat zumindest bei mir geholfen, ansonsten andere Schriftart verwenden.

  7. Apropos Praxisbeispiele: In einem meiner Projekte (work in Progress) verwende ich zwei Google-Fonts für die Headlines.
    Link zur Website: http://web90.apu.kundenserver42.de/farmtofork

    Ein gutes Beispiel, finde ich, für den Einsatz der Fonts abseits von der Verwendung für Fließtexte oder Standard Headlines.

    Das Google-Font Verzeichnis ist ein Segen;-) – und die Verwendungsmöglichkeiten sind hier überaus klar und hilfreich beschrieben.
    Der Hinweis von David ist bemerkenswert.

    Was mir zurzeit noch Kopfzerbrechen bereitet (hält sich aber in Grenzen) ist die ungültige Validierung der Maßnahme durch W3C – da wird kräftig gemeckert.
    Über Hinweise, die Fonts valide einzubinden würde ich mich freuen.
    Beste Grüße

  8. Hi darf man die webfonts auch kommerziell für Logos benützen? Muss man sich dir rechte kaufen? LG

  9. Alle Fonts im Googleverzeichnis sind Free Fonts und zur freien Verwendung. Frei heißt frei! Alle dort angebotenen Fonts kann man auch herunterladen: http://code.google.com/p/googlefontdirectory/ um sie z.B. auch für Print-Layouts zu verwenden.

    Wie Salinger schon beschrieben hat, ist die Darstellung im IE(lt)8 teilweise wirklich miserabel. Abhilfe schafft zum Beispiel der Einsatz von Font Squirrel.

    Etwas ausführlicher: http://www.oliverberghold.de/cms/index.php

  10. Die Darstellug beim IE 8 ist zum verzweifeln, dennoch sehe ich es nicht ein, wahnsinnig viel Arbeit in das Fixen zu stecken, wenn ich bei allen anderen Browsern zufrieden bin. Und dabei war man ja froh, als der IE6 mit all seinen Macken endlich anfing, Marktanteile(aktuell: 1-5%) zu verlieren.

    Zumal der IE 8 mit einem Marktanteil von gut 7% auch keinen Löwenanteil ausmacht.

  11. der artikel ist super und gut verständlich! vielen dank.
    eine frage hätte ich: ich bin auf der suche nach der arial, um sie als webfont für zb neuere mobile geäte zu benutzen. gerne natürlich for free. gibts einen tip?

    danke!
    andrea

  12. Hallo Ellen,
    danke für den guten Artikel.
    Ich habe am Wochenende unser Logo auch mit einer „Google Webfont“ geschrieben und eingebunden. Sieht im Firefox echt klasse aus, aber mit dem IE8 – Oh Graus!
    Da muß ich wohl eine Alternative für den IE8 bereitsstellen.

  13. hi Ellen, Ich benutze auf meiner Seite seit einiger Zeit die Google Font ‚Play‘ – in Firefox und IE wird die super angezeigt :) ,
    aber mit Chrome wird die Schrift einfach nicht richtig angezeigt bzw gerendert, die sieht total verpixelt aus!! Auch wenn ich mir mit Chrome deine orangen headlines hier anschaue mit der font ‚Varela Round‘ ist sie bei mir verpixelt. Hab auch die neueste Chrome version, und auf verschiedenen PC’s getestet. Irgendeine Idee? :( Bzw. wird bei dir deine Font in Chrome korrekt angezeigt? Die meisten meiner Besucher sind leider Chrome Nutzer!

    Gruß Kev

Schreibe einen Kommentar

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