In den letzten Jahren haben sich die Webfonts etabliert. Kaum mehr eine moderne Webseite, auf der sie nicht eingesetzt werden.

Erst durch Webfonts sind auch auf Webseiten ansprechende typografische Gestaltungen möglich, was vorher Printpublikationen vorbehalten war.

Die Web-Typografie hat inzwischen eine enorme Bedeutung. Was auch sinnvoll ist, da auch im Web die meisten Informationen textlicher Natur sind.

Möglich wurde dies aber erst durch die breite Auswahl an Schriftarten – den Webfonts eben – und die Unabhängigkeit von denen beim Nutzer installierten Schriften (den sogenannten Systemschriften).

Technisch möglich wird dies indem die Schriften auf einem Server abgelegt werden und dann beim Seitenaufruf von dort geladen werden.

Ganz vorne mit dabei bei den Webfonts sind die Google Fonts.

Was genau sind die Google Fonts?

2010 gestartet sind die Google Fonts heute der beliebteste Webfonts-Anbieter.

Fast 700 Schriftarten bietet der Suchmaschinenriese inzwischen an. Die Schriften kommen von verschiedenen Designern und sind sogenannte Open-Source-Fonts.

Google hostet die Schriften selber (also sie liegen sozusagen bei Google auf dem Server) und werden von dort geladen.

Sie sind kostenfrei kommerziell nutzbar. Also freier Einsatz auf jeder beliebigen Webseite. Das führt zu inzwischen zu über vier Billionen Seitenaufrufen, die Google Fonts einsetzen – eine unglaubliche Zahl.

Google Fonts Pageview / Seitenaufrufe

Google Fonts Pageview / Seitenaufrufe

Aber kein Wunder, ist der Dienst doch kostenlos, während bei anderen Anbietern meistens monatliche Gebühren bezahlt werden müssen.

Dazu kommt, dass die Schriften sehr einfach einzubinden sind. Mit einer einzigen Zeile Code haben Sie eine riesige Auswahl an Schriften zur Verfügung.

Warum hat Google überhaupt eine Schriftensammlung?

Warum treibt sich eine Suchmaschine auf dem Fonts-Markt umher?

Im ersten Moment mag es etwas merkwürdig erscheinen, aber der Service hat für Google durchaus Sinn.

Google ist ein kommerzielles Unternehmen, das vom und für das Web lebt. Alles, was das Web besser und einfacher macht, ist auch für Google gut.

Und Webfonts machen das Web besser!

Eine bessere Suche

Bis vor wenigen Jahren hatten Webdesigner nur eine geringe Anzahl an weit verbreiteten Systemschriften zu Auswahl.

Oder Bilder: Text als Bild abgespeichert.

Headlines, Buttons, Navigationspunkte – alles, was irgendwie typografisch etwas anders gestaltet sein sollte, wurde und musste in Photoshop erstellt und als Bild abgespeichert werden.

Die Verwendung von Bildern anstelle von HTML-Text ist aber schlecht. Zum Bearbeiten des Inhaltes muss ein Bildbearbeitungsporgamm geöffnet werden. Das Datenvolumen ist ungleich höher und damit die Ladezeiten der Seite. Und vor allem:

Google und Screenreader können die Texte in Bildern (noch) nicht indizieren. Die Suche ist aber Googles Kerngeschäft. Und je besser die Suchergebnisse sind, umso besser für Google.

Google Fonts hat maßgeblich dazu beigetragen, dass wir weniger „Text als Bild“ sehen, dafür mehr Webfonts.

Google will Daten

Natürlich will Google Daten, immer mehr Daten, unsere Daten.

Und natürlich wird Google gerne unterstellt, dass bei jedem Google-Dienst auch Daten gesammelt werden.

Ein offizielles Statement von Google sagt, dass durch die Google Fonts keine weiteren Daten gespeichert werden.

Ob man nun ein Problem mit einem eventuellen Datensammeln seitens Google hat, muss jeder für sich selber festlegen…

Das Web ist Typografie

Der alte Spruch Web Design is 95% Typography zeigt im Grunde auch die Bedeutung von Webfonts für das Web und für Google.

Wenn Texte schneller und einfacher gelesen werden können, wenn Webseiten besser aussehen, wenn das Web also zu einem besseren Ort wird und immer mehr Menscher immer häufiger das Web nutzen, dann profitiert eben auch Google davon.

Gibt es auch Nachteile?

Google gibt den Webdesignern die Schriften nicht aus reiner Nächstenliebe. Es ist ein – vermutlich – kalkuliertes Geschäft.

Die Erfahrungen der letzten Jahre mit Angeboten wie dem Google Reader zeigen aber, dass dieses „Geschäft“ schnell uninteressant werden kann. Und dann kann recht schnell der Stecker gezogen werden.

Was wäre aber das Ergebnis, wenn Google den Font-Dienst einstellen würde?
Viele viele Webseiten, die mit Schriftarten wie Arial und Times glänzen. Nicht mehr und nicht weniger.

Doch auch bei kostenpflichtigen Webfonts-Anbietern ist man nicht davor gefeilt, dass die eines Tages pleite gehen.

Und sollte es wirklich einmal so weit kommen, könnte man die eingesetzten Google Fonts-Schriften, da Open-Source, herunterladen und selber hosten. Oder eben zu einem der anderen Anbieter wechseln.

Qualität der Schriften

Für „echte“ Typografen sind die angebotenen Schriften eher ein Ärgernis. Im Vergleich zu professionellen, kostenpflichtigen Fonts leidet die Qualität der Open-Source-Fonts oft an mindestens einer Stelle.

Mal bieten sie keine ausreichende Unterstützung von Sonderzeichen.

Mal sind einzelne Buchstaben nicht fein ausgearbeitet und aufeinander abgestimmt (was Otto Normalverbraucher aber meistens nicht erkennt).

Mal besitzen diese keine oder nur wenige Schriftschnitte.

Alles Argumente, die für hochwertige Fonts anderer Anbieter sprechen.

Hier muss dann am Ende jeder selber abwägen. Wie alles, haben eben auch die Google Fonts ihre Vor- und Nachteile…

Die Google Fonts Bibliothek

Die Übersicht über die knapp 700 Schriftfamilien, die Google Fonts inzwischen umfasst, bietet einige Filter- und Sortiermöglichkeiten:

Google Fonts Übersicht

Google Fonts Übersicht

Die Auswahlmöglichkeiten sind sehr sinnvoll, da es schnell mühselig werden kann alle Schriften bei einer Suche anzuschauen.

Die erste Filteroption betrifft den Schrifttyp: Serifen-, Nicht-Serifen-, Display-, Handwriting- oder Monospace-Schrift.

Darunter befinden sich Filter für den Schriftschnitt (Thickness), die Neigung (Slant) und die Laufweite (Width).

Google Fonts FIlter

Google Fonts FIlter

Es gibt auch die Möglichkeit eigene Texte einzugeben und die Schriftgröße zu veränden, um so einen besseren Eindruck des späteren Ergebnisses zu bekommen.

Hier lassen sich die Suchergebnisse auch alphabetisch, nach Popularität, Anzahl der Schriftschnitte oder Einstellungsdatum sortieren.

Google Fonts Sortiermöglichkeiten

Google Fonts Sortiermöglichkeiten

Bei jeder Schrift befinden sich am rechten unteren Rand mehrere Buttons.

„See all styles“ zeigt aufgeklappt alle für diese Schriftart verfügbaren Schriftschnitte an. Je mehr Schriftschnitte eine Schrift hat, umso vielfältiger lässt sich diese einsetzen. Es ist also durchaus ein Auswahlkriterium für eine Schriftart.

Google Fonts "See all Styles"

Google Fonts „See all Styles“

Bei Klick auf den zweiten Button „Quick use“ wechselt man zu einer Übersicht der Schriftart. Hier lassen sich die einzelnen Schriftschnitte auswählen, die man einbinden möchte. Je mehr Schriftschnitte ausgewählt werden, umso größer ist die typografische Gestaltungsfreiheit, umso größer allerdings auch die zu ladende Datenmenge. Hier sollten also die Schriftschnitte bewusst gewählt werden und nicht pauschal alle aktiviert werden.

Darunter stehen dann die HTML- und CSS-Quellcodes, die benötigt werden, um die Schrift auf einer Webseite einzubinden und anzuzeigen.

Google Fonts "Quick Use"

Google Fonts „Quick Use“

Der große blaue Button „Add to Collection“ fügt die Schrift zu einer Kollektion hinzu. Hier kann man mehrere Schriftarten sammeln und später gebündelt auf der Webseite einbinden.

Google Fonts Review

Google Fonts Review

Besonders spannend ist bei der Kollektion, die am unteren Browserrand erscheint der Button „Review“ und dann der Reiter „Test Drive“. Hier bekommt man eine Art Webseitendummy, bei dem man die Schriftart(en) im konkreten Einsatz sieht und dazu noch vielfältige typografische Einstellungsmöglichkeiten hat

Google Fonts Test Drive

Google Fonts Test Drive

Bessere Suche mit Adobe Edge Web Fonts

Das recht neue Tool Adobe Edge Web Fonts bietet die Möglichkeit die Google Fonts zu durchsuchen und nach verschiedenen Kriterien zu selektieren. Diese sind teilweise andere als auf der Google Fonts-Seite und die Darstellung angenehmer.

Adobe Edge Web Fonts

Adobe Edge Web Fonts

3 einfache Schritte:
So bindest du Google Fonts ein

Das Einbinden von Google Fonts ist denkbar einfach.

1. Schriftart(en) aussuchen

Zuerst sollte eine oder mehrere Schriftarten, die bei dem Webseitenprojekt zum Einsatz kommen sollen, ausgewählt werden. Dazu gehört auch die Festlegung der benötigten Schriftschnitte.

Auswahl der Schriftart und Schriftschnitte.

Auswahl der Schriftart und Schriftschnitte.

2. Einbindungsvariante wählen

Es gibt drei Möglichkeiten, die Schriften zu laden, per HTML, CSS oder JavaScript.

Der Standard ist die Einbindung als HTML-Element im . Die Empfehlung ist die Einbindung so früh wie möglich im head.

Die Schriften lassen sich auch direkt im CSS aufrufen mit Hilfe der @import-Anweisung:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300|Roboto:400,700);

Diese Anweisung sollte gleich zu Beginn des Hauptstylesheets stehen.

3. Schrift in CSS definieren

Und dann muss die eingebundene Schriftart nur noch den gewünschten HTML-Elementen zugewiesen werden.

body {
    font-family: 'Open Sans', Arial, sans-serif;
}

Hier auch wie üblich Alternativschriften definieren, falls der Webfont, aus welchen Gründen auch immer, einmal nicht geladen wird. Fertig!

So schnell geht die Einbindung von Google Fonts und ist mit einer der Erfolgsgründe.

Google Fonts auf dem eigenen Rechner

Beim designen kann es hilfreich sein, die Google Fonts auf dem eigenen Rechner installiert zu haben, z.B. bei der Arbeit mit Photoshop. Auf https://github.com/google/fonts/ gibt es eine ZIP-Datei zum herunterladen mit allen Google Fonts-Dateien.

Wer mit einem Mac-System arbeitet braucht dank der Seite Installing Google Fonts nur eine Zeile Code ins Terminal zu kopieren:
[code] curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/install.sh | sh[/code]

Der Webfonts-Anbieter fonts.com bietet die Möglichkeit dank eines Tools namens SkyFonts Desktop-Versionen der Google Fonts automatisch mit dem Rechner zu installieren und später zu synchonisieren.

Die beliebtesten Google Fonts

Google liefert nicht nur eine Übersicht, wie oft ihre Schriften auf Seiten angezeigt werden.

Sie zeigen auch eine Rangliste der beliebtesten, sprich meistgenutzten, Schriftarten.

Rangliste der beliebtesten Google Fonts

Rangliste der beliebtesten Google Fonts

Ganz oben mit dabei stehen so bekannte Schriftarten wie „Open Sans“, „Droid Sans“ oder „Lato“.

Diese beliebtesten Schriften werden so häufig eingesetzt, weil sie auf Bildschirmen gut aussehen. Sie sind gut lesbar und verfügen über mehrere Schriftschnitte.

Folgend eine Auswahl der beliebtesten Google Schriftarten:

Beliebte Sans-Serif-Schriften:

Open Sans

open-sans
Gefühlt setzt jede zweite Webseite die Open Sans ein. Eine sehr schlichte, klare Schrift, die aber nicht ganz so charakterlos / langweilig wie die Arial oder Verdana daherkommt. 10 Schriftschnitte ermöglichen einen flexiblen und vielseitigen Einsatz.
Open Sans

Droid Sans

droid-sans
Ähnlich wie die Open Sans ist die Droid Sans schlicht und freundlich. Sie liegt aber nur in normalen und fetten Schnitt vor.
Droid Sans

Source Sans Pro

source-sans-pro
Mit 12 (!) Schriftschnitten ist die Source Sans Pro Adobes erste Open-Source-Schrift. Sie ist extra für den Screen-Einsatz optimiert und ist als schlichte schnörkellose Unternehmens-Webschrift eine Bank. Lässt sich gut mit der Source Serif Pro kombinieren.
Source Sans Pro

PT Sans

PT-Sans
Auch schlicht und klar mit vier Schriftschnitten ist die PT Sans.
PT Sans

Lato

lato
Mit zehn Schriftschnitten ist die Lato eine vielseitig einsetzbare Schriftart, die etwas „abgerundeter“ erscheint wie die oberen Schriftarten.
Lato

Ubuntu

ubuntu
Die Ubuntu präsentiert sich mit acht Schnitten. Sie hat wesentlich markantere Rundungen als die oberen Sans-Serif-Schriften und eignet sich vor allem für Überschriften. Bei Fließtext mit Vorsicht zu genießen.
Ubuntu

Roboto

roboto
Die Roboto ist sehr beliebt und verfügt über 12 Schnitte. Sie läuft sehr eng (d.h. die Buchstaben sind recht schmal), dadurch passen mehr Buchstaben in eine Zeile, als bei anderen Schriftarten. FÜr Überschriften ist das oft hilfreich, bei Fließtexten führt dies aber häufig zu einer schlechteren Lesbarkeit. Lässt sich gut mit der Roboto Slab kombinieren.
Roboto

Raleway

raleway
Die Raleway hat neun Schnitte, wirkt markant und läuft etwas weiter, da die Buchstaben recht breit sind.
Raleway

Merriweather Sans

Merriweather-Sans
Acht Schnite präsentiert die Merriweather Sans. Ihr Rundungen sind recht markant. Lässt sich gut mir der Merriweather kombinieren.
Merriweather Sans

Signika

signika
Die Signika hat vier Schriftschnitte und hat mit ihren besonderen Rundungen sanft markanten Charakter.
Signika


Beliebte Serif-Schriften:

Droid Serif

droid-serif
Die Droid Serif ist die perfekte Ergänzung zur Droid Sans. Sie hat vier Schnitte.
Droid Serif

Vollkorn

vollkorn
Die Vollkorn ist für Fließtexte und Überschriften geeignet und hat vier Schriftschnitte.
Vollkorn

Lora

lora
Mit ebenfalls vier Schnitten ist die Lora eine sehr markante Serifen Schrift. Für Fließtexte wie Überschriften geeignet.
Lora

Playfair Display

Playfair-Display
Mit sechs Schniten ist die Playfair Display recht gut ausgebaut. Sie hat eine starken Kontrast durch die markanten Unterschiede in den Strichstärken. Für Fließtext eher ungeeigent, kann sie in Überschriften große Akzente setzen.
Playfair Display

Old Standard TT

Old-Standard-TT
Sehr schmall laufend, ähnlich markant wie die Playfair Display, drei Schriftschnitte – die Old Standard TT ist eine moderne Serifenschrift, die auch eher für Überschriften geeignet ist.
Old Standard TT

Merriweather

Merriweather
Die Merriweather ist sehr vielseitig mit acht Schriftschnitten. Durch die hohe x-Höhe der Buchstaben ist sie auch für Fließtexte gut geeignet. Lässt sich gut mir der Merriweather Sans kombinieren.
Merriweather

Libre Baskerville

Libre-Baskerville
Die Libre Baskerville basiert auf dem Schriftklassiker „Baskerville“, hat drei Schnitte und eine hohe x-Höhe, wodurch sie sich auch für Fließtexte eignet
Libre Baskerville

Neuton

neuton
Die Neuton hat sechs Schnitte und eignet sich neben Überschriften auch gut für Fließtexte.
Neuton


Beliebte Slab-Serif-Schriften:

Slab-Serifenschriften haben sehr betonte Serifen und wenig oder gar keinen Unterschied in den Strickstärken. Sie eignen sich fast ausschließlich für größere Texte (Überschriften).

Arvo

Arvo
Arvo

Josefin Slab

josefin-slab
Die Josefin Slab überzeugt durch zehn Schriftschnitte.
Josefin Slab

Bitter

Bitter
Bitter


Die Wahl einer Schriftart entscheidet sich nicht zuletzt an der Auswahl der Schriftschnitte. Google Fonts bietet leider keine Filtermöglichkeit bezüglich der Anzahl der Schriftschnitte. Diesem Problem hat sich die Webseite Better Google Fonts angenommen und listet kurz und knackig die Google-Schriftarten mit mindestens vier Schriftschnitten auf. Für den schnellen Überblick sehr hilfreich.

Google Web Fonts Families

Google Web Fonts Families

Fazit

Google Fonts sind so etwas wie der perfekte Einstieg in die Welt der Webfonts. Einfach und schnell lassen sich unterschiedliche Schriftarten für das eigene Design testen.

Für viele Webseiten sind die Google Fonts auch vollkommen ausreichend. Sei es der Umfang der Auswahl oder die Qualität der Schriften.

Dadurch dass diese Schriften so häufig eingesetzt werden, profitiert auch der Besucher. Denn die Google Schriften werden dann häufig aus dem Browser-Cache geladen, wenn der Besucher auf eine Seite kommt, die die gleiche Schrift einsetzt wie schon eine vorher besuchte.

Es ist aber auch so, dass man mit einer „Open Sans“ oder „Droid Serif“ nicht mehr wirklich individuell überzeugen kann. Zu häufig begegnen einem diese Schriftarten. Es ist wie mit allem: was gut ist, setzt sich in der breiten Masse durch und verliert dadurch eben an Individualität.

Egal ob Google Fonts oder die Schriften eines anderen Anbieters:
Webfonts sollten ausführlich getestet werden.

Das heißt, die sollten auf unterschiedlichen Systemen und Browsern begutachtet werden, da diese die Schriften unterschiedliche rendern, sprich anzeigen. Was auf dem einem System sehr gut lesbar und fein geglättet ist, sieht auf anderen pixelig und leicht unscharf aus, ist also schlechter lesbar.

Die Webfontssuche kann dabei durchaus langwierig werden:
Ein guter Konsens aus gestalterischer Freiheit, besserer Typografie und der durch die eingebundenen Webfonts vergrößerten Ladezeit muss gefunden werden.

In einem der kommenden Artikel stelle ich tolle Gogole Fonts-Schriftkombinationen vor.

Google Fonts: Wissenswertes, die Einbindung in 3 einfachen Schritten und die 21 beliebtesten Schriftarten
4.6433 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Webdesign-Newsletter +
WEBDESIGN-CHECKLISTE
mit 90 Checkpunkten für
Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht und Adressen gebe ich natürlich auch nicht weiter!
(Beispiele, Datenschutz, Analyse und Widerruf)

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog.
Tägliche Webdesign-Links von Martin gibt es auch auf twitter.

3 Kommentare

  1. Vielleicht ist es Absicht die zip-Datei mit den Fonts nicht zu verlinken. Andererseits ist Github nicht jedermanns Sache und den Link zur Zip-Datei habe ich zufällig gefunden. Nämlich nicht durch die Suchfunktion sondern in Readme.md. Deswegen der Link hier https://github.com/google/fonts/archive/master.zip.

    Du schreibst ja, es besteht die Gefahr, dass Google das eines Tages diesen Service abschalten könnte. Aber die Schirftarten sind Opensource. Kann man den gewählten Font vorsichtshalber gleich auf die eigene Domain legen? Spontan würde ich ja sagen, weil OpenSource. Aber Du bist ja der Kenner.

    • Hallo Stephan,
      der Link zur ZIP-Datei ist ja auf der GitHub-Seite ja eigentlich recht einfach zu finden, unter „Download All Google Fonts“…

      „Kann man den gewählten Font vorsichtshalber gleich auf die eigene Domain legen? Spontan würde ich ja sagen, weil OpenSource.“
      -> Ich zitiere aus dem Artikel: „…könnte man die eingesetzten Google Fonts-Schriften, da Open-Source, herunterladen und selber hosten.“

      Gruss
      Martin

Trackbacks/Pingbacks

  1. google auf webseite einbinden | bruinrow

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!