Google Zertifizierter Partner

Google Fonts

Google-Fonts-Logo

In der Anfangszeit war das World Wide Web voll von langweiligen Standardschriftarten. Während dies eine Kompatibilität der Seiten für möglichst viele Benutzer sicherstellte, schränkte es die kreativen Möglichkeiten doch stark ein. Mit der Einführung von CSS3 unterstützen die meisten Browser zwar den @font-face Tag und ermöglichten so die Benutzung angepasster Schriftarten. Die Lizensierung von Schriften kann allerdings schnell unübersichtlich werden und ist aus diesem Grund nicht immer die beste Idee. Nicht zu vergessen entstehen normalerweise auch Kosten.

Einführung in Google Fonts

Mit der Einführung von Google Fonts steht nun ein kostenfreier und sehr einfacher Weg zur Verfügung spezielle Schriftarten in Ihre Website einzubinden. 

Link zum Dienst: www.google.com/fonts. Hier sehen Sie die Oberfläche von Google Fonts: 

 Google-Fonts-Oberfläche

Was sie hier sehen unterscheidet sich kaum von anderen Schriftart-Bibliotheken. Im Grunde genommen handelt es sich um eine große Liste der zur Verfügung stehenden Schriftarten. Zurzeit umfasst die Bibliothek über 700 verschiedene Schriftfamilien.

Die Anwendung ermöglicht es, die Darstellungsweise der Schriften ganz nach Ihren Wünschen anzupassen. Unter anderem können Sie den Beispieltext sowie die Größe der Vorschau ändern.

Die Liste der Schriftarten lässt sich nach verschiedenen Kriterien wie Beliebtheit oder Alter sortieren.

Ganz wichtig sind auch die auf der linken Seite zusammengefassten Funktionen zum Suchen. Nur damit lässt sich die Auswahl von über 700 Schriftfamilien effektiv nutzen. Sie können selektieren nach Typ, Dicke, Weite etc.

Schriftarten auf der eigenen Webseite einsetzen

Wenn Sie nun eine oder mehrere Schriftarten gefunden haben, die Sie einsetzen wollen, müssen diese mit Hilfe des blauen Buttons „Add to collection“ einer Sammlung hinzugefügt werden. Mit dem Reiter „Use“ am unteren rechten Rand geht es dann zum eigentlichen Einsatz der Schriften.

Dort können Sie nun zwei Optionen wählen: Zum einen welche Schriften aus der Familie Sie genau nutzen möchten und zum anderen, ob mit dem Standard-Alphabet oder erweitert.

Google fonts Page LoadAm rechten Rand der Seite sehen Sie eine sehr nützliche Anzeige, welchen Einfluss die Schriften auf die Ladezeiten Ihrer Seite voraussichtlich haben werden. Es ist selbstverständlich, dass man nur die Schriften bzw. Optionen einbinden sollte, die auch genutzt werden.

Von hier aus ist es nur noch der Schritt "Kopieren und Einfügen" bis die Schriftarten eingebunden sind. Sie können zwischen 3 Vorgehensweisen wählen:

 

  • Standard: Mit diesem HTML Code importieren Sie ein automatisch generiertes Stylesheet, das die Schriften enthält.
  • CSS: Alternativ können Sie diese @import Regel in Ihrem CSS Code platzieren.
  • JavaScript: Der angezeigte Code ist Teil der Web Font Loader Bibliothek die erweiterte Möglichkeiten bietet, wie zum Beispiel das dynamische Laden von Schriften.

Sobald die Schriften so eingebunden sind, können Sie wie gewöhnlich als CSS font family genutzt werden.

Damit ist eigentlich bereits alles erklärt, was Sie wissen müssen, um Ihrer Kreativität bei der Gestaltung des Schriftbildes Ihrer Webseite freien Lauf zu lassen. Für weiterführende Informationen zum Thema Webdesign oder zur Unterstützung bei Webprogrammierungen steht Ihnen das TILL.DE-Team natürlich wie immer gerne zur Seite.

 

 

Weitere Google-Dienste finden Sie in unserer Liste mit allen Google Produkten.

Kontaktieren Sie uns gern!

Ihr Ansprechpartner

Sandra Wöhlkens

Sandra Wöhlkens

"Das beste daran: Es fühlt sich nicht so an wie Marketing"

Telefon: +49 531 224334 - 44

E-Mail: vertrieb@till.de

Zertifizierungen

Google Analytics zertifiziert
Google Tag Manager zertifiziert
Google AdWords zertifiziert
Google Academy Trainer