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).

Der beliebteste Webfonts-Dienstleister sind die Google Fonts.

Was genau sind die Google Fonts?

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

Knapp 900 Schriftarten bietet der Suchmaschinenriese inzwischen an. Die Schriften kommen von verschiedenen Designern und sind sogenannte Open-Source-Fonts (d.h. mehr oder weniger frei benutzbar).

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 22 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 steht eine eine riesige Auswahl an Schriften zur Verfügung.

Webdesign Survival Kit

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 Text als Bild abgespeichert.

Headlines, Buttons, Navigationspunkte – alles, was irgendwie typografisch etwas anders gestaltet sein sollte, musste und wurde 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. Auf jeden Fall ist es mit der Datenschutzgrundverordnung (DSGVO) nicht mehr ganz so klar. Aber dazu später mehr…

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 im Leben, haben eben auch die Google Fonts ihre Vor- und Nachteile …

Die Google Fonts Bibliothek

Die Übersicht über die knapp 900 Schriftfamilien, die Google Fonts inzwischen umfasst, bietet einige Filter- und Sortiermöglichkeiten (am rechten Rand):

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.

Auswahlmöglichkeiten

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

Filter

Filtermöglichkeit nach Schrifttyp

Es gibt verschiedene Sortiermöglichkeiten: Alphabetisch, Einstellungsdatum, populäre und trendige (wo da der Unterschied liegt?).

Es gibt die Filtermöglichkeit nach Sprachen, wie bspw. Arabisch, Griechisch oder Latein (wäre für uns nicht verkehrt 😉

Und dann folgen vier Auswahloptionen, die die Gestaltungsmöglichkeiten der Schriftarten betreffen:

Auswahl der Anzahl der Schriftschnitte

Schriftschnitte
Bei Number of Styles kann man auswählen wie viele Schriftschnitte (also z.B. Light, Normal, Fett, Kursiv) der Font haben soll. Je mehr Schriftschnitte eine Schrift hat, umso vielfältiger lässt sich diese einsetzen. Es ist also durchaus ein Auswahlkriterium für eine Schriftart.

Filter der Strichstärke

Filter der Strichstärke (oben sehr dick, unten sehr dünn)

Strichstärke
Mit Thickness lässt sich festelegen, welche Strichstärke die Buchstaben haben sollen. Das reicht von sehr feinen Haarlinien bis zu sehr massiven Strichstärken:

Filter: eher gerade oder schräge Buchstaben

Filter: eher gerade oder schräge Buchstaben


Gerade oder schräg
Mit Slant lässt sich bestimmen, ob die Buchstaben eher gerade sein sollen (was einem normalen Zustand entspricht) oder ob diese eher (sehr) schräg sein sollen. Bei letzterem werden kursive Schriftschnitte angezeigt, aber auch Schriftarten, deren Buchstaben eben eher schräg sind.

Filter der Buchstabenweite

Filter der Buchstabenweite


Buchstabenweite
Mit Width lässt sich bestimmten, ob die Buchstaben eher schmal oder eher weit laufen sollen. Sehr schmale Buchstaben würde den Schriftarten „Condensed“ entsprechen.

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:

Eigene Texte und Schriftgröße

Eigene Texte und Schriftgröße

Ein Klick auf die Schriftart führt auf die jeweilige Unterseite. Hier werden die einzelnen vorhandenen Schriftzeichen und Schriftschnitte, sowie weitere Infos über den Font und den Designer augezeigt.

Fontbeschreibung

Jeder Font wird ausführlich auf einer eigenen Seite vorgestellt.

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

1. Schriftarten und Schriftschnitte aussuchen

Das Einbinden von Google Fonts ist denkbar einfach. 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.

Bei Klick auf den roten Kreis mit dem weißen Kreuz wählst du eine Schriftart aus, die du zu deinem Web-Projekt hinzufügen möchtest. Am unteren Rand erscheint dann eine „Pop-Up-Fenster“ mit schwarzem Balken.

Einen Font auswählen

Ein Klick auf den schwarzen Balken öffnet das Fenster und bietet dir zwei Optionen: Den Quellcode, um die Schriftart einbinden zu können (Embed) und die Auswahl der Schriftschnitte (Customize).

Zuerst solltest du unter dem Reiter „Customize“ die benötigten Schriftschnitte auswählen, die du einbinden möchtest. Je mehr Schriftschnitte ausgewählt werden, umso größer ist die typografische Gestaltungsfreiheit, umso größer allerdings auch die zu ladende Datenmenge! Hier solltest du also die Schriftschnitte bewusst wählen und nicht pauschal alle aktivieren.

Schriftschnitte wählen

Die benötigten Schriftschnitte auswählen.

Du kannst auch mehrere Schrtiftarten wählen. Dazu ein auf die halbtransparente graue Hintergrundfläche klicken, so dass das Pop-Up wieder an den unteren Rand verschwindet und weitere Schriftarten mit Hilfe des roten Kreises hinzufügen.

Dann wieder im Pop-Up-Fenster die gewünschten Schriftschnitte aktiveren.

Mehrere Schriftarten

Mehrere Schriftarten und Schriftschnitte ausgewählt.

2. Einbindungsvariante wählen

Wenn du Schriftarten und Schriftschnitte gewählt hast, kannst du unter dem Reiter „Embed“ die Einbindungsvariante wählen.Es stehen zwei Möglichkeiten, die Schriften zu laden, zur Auswahl: per HTML oder CSS.

Die HTML-Einbindung sollte so früh wie möglich im head-Bereich deiner Website erfolgen. Ein beispielhafter Code sieht folgendermaßen aus:

<link href='https://fonts.googleapis.com/css?family=Markazi+Text|Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Die bevorzugte Variante ist die Einbindung per CSS, die mit Hilfe der @import-Anweisung erfolgt:

@import url('https://fonts.googleapis.com/css?family=Markazi+Text|Roboto:400,400i,700,700i');

Diese Anweisung sollte möglichst auch gleich zu Beginn des Hauptstylesheets stehen.

Die Einbindung per CSS ist häufiger, da man meistens – egal ob statische Website oder in einem Content Management System – eher in der CSS-Datei arbeitet, um optische Anpassungen vorzunehmen. Während man im head-Bereich einer Website selten(er) direkt arbeitet. Bei einer statischen Seite wäre dies sowieso eher unpraktisch, da bei Änderungen der Schrifteinbindung dann jede einzelne Seite korrigiert werden müsste.

3. Schrift in CSS definieren

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

body {
    font-family: 'Roboto', 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 dieses Dienstes.

Google Fonts selber hosten –
die „DSGVO-konforme“ Variante

Ich habe es oben schon erwähnt: Google Fonts einzusetzen ist datenschutzrechtlich zumindest kritisch zu sehen. Laut Google werden zwar keine personenbezogenen Daten erhoben, aber wer bzgl. der DSGVO rechtlich auf sicherer(er) Seite sein will, wählt einen anderen Weg: Und bindet die Google Fonts lokal ein und lädt diese vom eigenen Server und nicht von den Google Servern.

Was ich dabei nicht verschweigen will: Es kann auch durchaus Nachteile haben die Fonts selber zu hosten! Die Ladezeiten können länger sein. Im ungünstigen Falle werden die Texte zuerst mit dem Fallback-Font angezeigt und „springen“ dann erst um, wenn der Google Font geladen ist. Dazu wird der eigene Server belastet.

Je nach Schriftart und deren Verbreitung kann es gut sein, dass diese schon im Browser-Cache des Besuchers liegt, müsste also bei Einbindung über den GoogleServer nicht noch einmal geladen werden. Bei eigenem Hosting aber eben schon.

Es gibt nicht wenige, die der Meinung sind, dass die Einbindung der Google Fonts direkt von Google sich mit dem sog. „berechtigtem Interese“ (nach Art. 6 Abs. 1 lit. f DSGVO) begründen lasse. Was eine lokale Einbindung nicht notwendig machen würde.

Schriftart(en) herunter laden

Zuerst müssen die benötigten Schriftarten herunter geladen werden. Neben der oben schon erwähnten Möglichkeit mittels GitHub, geht dies am einfachsten über die Website Google Webfonts Helper.

Der Google Webfonts Helper

Der Google Webfonts Helper

Im linken Bereich die Schriftart(en) auswählen und im rechten Bereich die Feineinstellungen in vier Schritten:

1. Zeichensatz auswählen
Latin ist für eine mitteleuropäische Website die optimale Wahl. Und da es vorausgewählt ist, brauchst du hier eigentlich nichts zu machen.

2. Schriftschnitte auswählen
Wie direkt bei der Google Fonts Website:
Wähle mit Bedacht die Schnitte aus, die du auf jeden Fall brauchen wirst. Die Option „700“ ist selten eine schlechte Idee, da dies für „fette“ Texte genommen wird.

Schriftschnitte auswählen

Schriftschnitte auswählen

3. CSS-Code kopieren
Unter dem Reiter „Best Support“ findest du den CSS-Quellcode, der ganz oben in deine CSS-Datei gehört.

Wenn du dir den Code anschaust, erkennst du gut die einzelnen Schriftarten, -schnitte und dateiformate, die für die einzelnen Browser benötigt werden (wie bspw. .eot, .woff oder .ttf).

CSS-Code

Generierter CSS Code

4. Schriftdateien downloaden
Und am Ende gibt es einen blauen Button, mit dessen Hilfe du die benötigten Schriftdateiformate herunter laden kannst.

Google Webfonts Helper Download Button

Fonts downloaden

Wenn du weitere Google Fonts verwenden möchtest, musst die vier Schritte entsprechend wiederholen!
Die weiteren CSS-Codes zur Font-Einbindung kannst du dann ganz einfach untereinander kopieren und in deine CSS-Datei einfügen.

Google Fonts auf den eigenen Server laden

Die ZIP-Datei(en) entpackst du und lädst diese dann (am besten mit einem FTP-Programm) auf den eigenen Server zu dem Website-Projekt.

Exemplarisch am Beispiel einer WordPress-Datei könntest du im Ordner deines (hoffentlich eingesetzten) Child-Themes einen neuen Ordner (z.B mit den Namen „fonts“ erstellen). Hier lädst du dann die entpackten Dateien hinein.

Font-Ordner

Neuer Schriften-Ordner auf dem Server.

je nachdem wie deine Ordnerstruktur aussieht, kann es notwendig sein, den Pfad zu Schriftdateien anzupassen. Standardmäßig sieht der Pfad folgendermaßen aus:

url('../fonts/roboto-v18-latin-regular.eot?#iefix')

Aus dem Ordner, in dem die CSS-Datei liegt, einen Ordner in der Struktur zurück und dann in den fonts-Ordner. Das ist sinnvoll, wenn die CSS-Datei beispielweise selber in einem (styles-)Ordner liegt. Wenn Sie das nicht macht, sondern beispielsweise direkt im Child-Themes-Ordner auf der Hautptebene liegt, kann der Pfad schon direkt im Tool google-webfonts-helper angepasst werden:

Hier gibt es unterhalb des CSS-Codes das Feld „Customize folder prefix“. Hier den Pfad entsprechend anpassen:

Schriftpfad anpassen

Schriftpfad anpassen

Dann sieht der Pfad so aus:

url('fonts/roboto-v18-latin-regular.eot?#iefix')

Klar, dann die ZIP-Datei (neu) downloaden und auf den eigenen Server laden. Alternativ kann man die Pfade natürlich auch per Hand im Code anpassen. Das ist kein Hexenwerk.

CSS-Code einfügen

Und dann muss noch, wenn noch nicht geschehen, der CSS-Code in einer CSS-Datei des Projektes eingebunden werden.

Bei einer eben erwähnten WordPress-Website wäre dies also am besten zu Beginn der CSS-Datei des Child-Themes.

Fertig, die eigene lokale Einbindung ist nicht schwer, der Aufwand aber natürlich größer als die schnelle Einbindung über den Google Server. Welche Variante für dich und deine Projekte am sinnvollsten ist, musst du selber entscheiden.

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:

 curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/install.sh | sh

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.

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 und wird austauschbar.

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 unterschiedlich 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:

Es muss ein guter Konsens aus gestalterischer Freiheit, guter Webtypografie und der durch die eingebundenen Webfonts vergrößerten Ladezeit gefunden werden.

Google Fonts: In 3 einfachen Schritten einbinden
4.642 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Webdesign-Newsletter abonnieren & als Dankeschön die WEBDESIGN-CHECKLISTE erhalten mit über 90 Checkpunkten für Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Webdesign Survival Kit

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.

5 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

  2. Hallo Stephan,
    Ich bin per Zufall auf diese Seite gestossen und finde sie sehr hilfreich.
    Da aber gutes noch besser werden kann eine kleine Hinweis

    Unter „2. Einbindungsvariante wählen“ ist wohl etwas Text verloren gegangen (mit XXXX markiert):
    „Der Standard ist die Einbindung als HTML-Element im XXXX . Die Empfehlung ist …“

    Gruss
    Ralf-Michael

    • Hallo Ralf-Michael,
      danke für den Hinweis. Ich habe es angepasst.
      Gruss
      Martin

Trackbacks/Pingbacks

  1. google auf webseite einbinden | bruinrow

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!