Google Fonts nutzen wie die Profis

Die Google Fonts sind eine Sammlung von mehr als 1.000 kostenlosen Webfonts wie für Webprojekte aller Art. Das Projekt begann 2010 und gilt heute als beliebteste Open Source-Quelle für Webschriften. Die Webfonts der besten Schrift-Arten, serifenlose Schriftart, HTML-Einbindung oder alles in Richtung Handschrift: bei zahlreichen WordPress-Vorlagen kommen sie zum Einsatz und sind die erste Wahl vieler Webdesigner. Erfahre jetzt einfache Schritte, wie du Google Fonts in dein Projekt einbindest und DSGVO-konform nutzt.

Einfache Schritte: Die passende Webfonts für deine Website oder App finden

Seit Jahren gibt es immer mehr Webfonts, die Nutzern unabhängig von den bei ihnen installierten Systemschriften angezeigt werden können. Webdesignern haben dadurch mehr gestalterische Möglichkeiten.

Google Fonts gilt als beliebteste kostenlose Web-Font-Sammlung. Du findest sämtliche Schriften direkt auf der Website der Google Fonts und kannst diese einbinden oder herunterladen. Es gibt Sortiermöglichkeiten, zum Beispiel nach:

• Popularität und Einstellungsdatum
• Anzahl der Schriftschnitte (Number of Styles) wie normal, kursiv, fett
• Strichstärke (Thickness)
• „Slant“, der bestimmt, ob Buchstaben eher schräg oder gerade sein sollen
• „Width“, mit der du die Buchstabenweite aussuchst

Mit einem Klick gelangst du auf die Unterseite der jeweiligen Webfonts und siehst weitere Informationen. Eine praktische Alternative sind die Adobe Edge Fonts, mit der sich die Sammlung nach verschiedenen Kriterien sortieren lässt.

Die Auswahl der Typografie hat entscheidenden Einfluss auf das gesamte Design der Website. Sie entscheidet, ob Besucher die Texte einfach und schnell lesen können und die Optik gefällt.

Google Fonts in deine Website integrieren

Der Webfont deiner Wahl ist in wenigen Schritt eingebunden. Auf der Website mit den Google Fonts wählst du den benötigten Webfont sowie Parameter wie die Schriftschnitte aus. Jetzt siehst du drei Möglichkeiten, um die Schriftart in deinem Webprojekt einzubinden:

1. über die Google-Server per Link-Tag (Fonts von Google Servern)
2. per @import
3. selbst gehostet mit den heruntergeladenen Dateien

Hinweis: WordPress-Nutzer können die Google Fonts auch aktiv per Plugin installieren. Die Erweiterung Easy Google Fonts bietet beispielsweise eine einfache Möglichkeit, jedem Theme Google Fonts individuell hinzuzufügen.

Google Fonts und die DSGVO

Durch die Bereitstellung auf dem Google-Server speichert Google Zugriffsdaten wie die IP-Adressen. Nach eigenen Angaben arbeitet Google zwar nicht mit Cookies, die Nutzeraktivitäten lassen sich jedoch prinzipiell nachverfolgen. Die dritte Möglichkeit – die lokal eingebundenen Dateien – unterbindet das potenzielle Tracking und ist daher die empfohlene Vorgehensweise für die DSGVO-konforme Verwendung der Google Fonts.

Alternativ musst du deine Seitenbesucher in deiner Datenschutzrichtlinie über die Verwendung der Schriften informieren und mit einem „überwiegend berechtigten Interesse“ der Nutzung argumentieren.

Tipps für die Profi-Verwendung

Die Google Fonts punkten mit einer Reihe von Vorteilen. Mit den folgenden Tipps nutzt du die Möglichkeiten optimal aus.

Mehrere Anfragen zusammenfassen

Vermeide das Herunterladen vieler kleiner Dateien und somit das einzelne Laden der Webfonts. Die zwei Schriften Lato und Raleway lädst du auf diese Weise:

Die Maßnahme spart eine Anfrage ein und verbessert somit die Ladezeit.

Einen spezifischen Stil auswählen

Wenn du nur einen Stil der verwendeten Google Fonts möchtest, kannst du dies im Code direkt angeben – mit „i“ für italic und „b“ für bold:

Nutze Font-Effekte

Wenn du Text mit speziellen Effekten erstellen möchtest, machen die Google Fonts deine Arbeit sehr einfach. Effekte wie Neonlicht oder Feuer sind schnell hinzugefügt, indem du „effect=“ zur Anfrage hinzufügst. Im Beispiel ergänzen wir den Neon-Effekt:

Beliebte Schriftarten: Kleine Auswahl beliebter Google Fonts

Mit den Google Fonts hast du zahlreiche Alternativen, die du anstelle der Systemschriften verwenden kannst.

• Eine beliebte Alternative zu Helvetica Neue ist zum Beispiel die Webfont Roboto.
• Montserrat funktioniert anstelle von Proxima Nova oder Gotham.
• Open Source Serif Pro lässt sich angenehm lesen und ersetzt beispielsweise die Schrift Charter.

Interessant sind auch verschiedene Paarungen von Google Fonts, die sich für Überschriften und den Fließtext eignen.

• Für zeitlose Unternehmen kommt die Kombination von Oswald und EB Garamond infrage.
• Ein freundliches und zugleich professionelles Auftreten vermitteln die beiden Schriften Rufina und Sintony.
• Verspielte Eleganz drückst du mit der Kombination von Playfair Display und Karla aus.

Zusammenfassung

Die Google Fonts helfen Webdesignern bei der ansprechenden und individuellen Gestaltung ihrer Websites und vermeiden den langweiligen Einheitsbrei der Systemschriften. Da sie als Open Source-Lizenz kostenlos zur Verfügung stehen und auch für kommerzielle Projekte genutzt werden dürfen, haben sie sich zur beliebten Webfont-Bibliothek im Netz entwickelt. Stöbere jetzt durch die Schriften und suche neue Fonts für deine Internetpräsenz aus.