icancode.de

Google Fonts

Einleitung

Ben

Ben

Ben studiert Medieninformatik und Gestaltung an der Uni Bielefeld. Nebenberuflich als iOS-Softwareentwickler in einem kleinen Startup tätig, beschäftigt er sich mit allen Dingen die mit Apple zu tun haben.


Neuste Artikel

Emmet – Der Weg des geringsten Widerstands 30th June, 2015

Die besten Fonts zum Programmieren 15th June, 2015

Programmierung

Google Fonts

Veröffentlicht am .

Wenn es um Webservices geht ist Google die Nummer Eins in der Branche. Neben der bekanntesten aller Suchmaschinen und Mail-Dienste bietet die Firma allerdings auch eine umfangreiche Schriftenbibliothek. Die einzelnen Typefaces lassen sich sehr einfach in die eigene Webseite einbinden, aber auch herunterladen und auf dem eigenen Rechner installieren. So kann man sie dann in Textverarbeitungsprogrammen oder auch Latex-Dokumenten verwenden.

Schriftart finden

Derzeit (April 2015) bietet die Google Fonts Bibliothek 676 Schriftarten. Diese sind standardmäßig nach Popularität sortiert, was sich aber auch auf eine chronologische oder alphabetische Sortierung umstellen lässt. An der linken Seite gibt es ein Suchfeld und ein paar einfache Filteroptionen um die Liste der Schriftarten auf die gewünschte Form zu reduzieren.

Die Optionen für Thickness (Dicke der Schriftart), Slant (geschwungene Schriftart) und Width (Schriftbreite) lassen sich jeweils über einen Schieberegler anpassen um das gewünschte Schriftbild zu finden.

Einbinden in eine Webseite

Wenn man sich in der langen Liste an Fonts für eine Schriftart entschieden hat, kann man mittels diesem Knopf

zu einer Detailauswahl wechseln. Hier kann man die einzelnen Schnitte (Dick/Dünn, kursiv) auswählen die man einbinden möchte. Umso mehr Schnitte man auswählt, umso mehr Schriftdateien müssen beim jeden Seitenaufruf heruntergeladen werden, hier sollte man also maximal 2–3 auswählen um den Datenverbrauch des Benutzers gering und die eigene Ladegeschwindigkeit hochzuhalten.

Zum eigentlichen Einbinden auf der Webseite hat man nun zwei Optionen: per HTML im Head-Bereich oder direkt via CSS-Import.

Beispiel HTML

 <link href='http://fonts.googleapis.com/css?family=Roboto:100, 300' rel='stylesheet' type='text/css'>;

Beispiel CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400, 700, 400italic);

Ist die Schriftart erfolgreich eingebunden, lässt sie sich ganz normal über das font-family-Attribut im CSS-Code verwenden. Dabei ist darauf zu achten, dass Schriftarten deren Name aus mehr als einem Wort besteht in Anführungszeichen zu setzen. Auf der Google-Fonts Webseite wird aber auch der benötigte Code automatisch bereitgestellt, so dass man diesen im Normalfall nur kopieren und im Stylesheet einfügen muss.

font-family: 'Lobster', cursive;

Auf dem eigenen Rechner nutzen

Natürlich lassen sich auch sämtliche Google Fonts herunterladen, installieren und anschliessend in Textverarbeitungsprogrammen oder Präsentationen verwenden. Dies geschieht in zwei Schritten:

1. Schriften zur eigenen Collection hinzufügen

Alle Schriftarten, die man gerne herunterladen möchte, müssen zunächst mittels des Buttons Add to Collection zur eigenen virtuellen Sammlung an Google Fonts hinzugefügt werden.

2. Collection herunterladen

Ein kleiner Knopf oben rechts mit einem Pfeil-Symbol ruft ein Popup auf welches die eigentliche Download-Option preisgibt.

In diesem Popup ist ein Link zu einer .zip-Datei zu finden, welcher – Überraschung – eine .zip-Datei mit sämtlichen Schriftarten in der Collection herunterlädt. In dem Archiv sind die Fonts dann als .ttf-Dateien enthalten welche man dann einfach installieren und verwenden kann.

Interessante Schriftarten

Die Liste der Google Fonts ist standardmäßig nach Popularität sortiert. Aber auch weniger populäre Schriften eignen sich meistens besonders für markante und auffällige Überschriften (Indie Flower, Lobster, Poiret One) aber auch für gut lesbaren Fließtext (PT Sans, Fira Sans). Aber auch bekannte und beliebte Schriftarten wie die Open Sans oder Source Sans Pro sind meist universal für viele Zwecke einsetzbar. Die Schriftart Roboto wird Besitzern von Android-Smartphones bekannt vorkommen, diese wird dort als Systemschrift verwendet. Für Programmierer ebenfalls von Interesse sind die nichtproportionale Schriftarten wie Source Code Pro, Fira Mono und Inconsolata.

Ben

Ben

Ben studiert Medieninformatik und Gestaltung an der Uni Bielefeld. Nebenberuflich als iOS-Softwareentwickler in einem kleinen Startup tätig, beschäftigt er sich mit allen Dingen die mit Apple zu tun haben.

Navigation