Google Fonts

Google, unser Freund und Helfer, hat 2010 mit den Google Webfonts wieder einmal aufgegriffen, was Webdesigner brennend interessiert und im Handumdrehen eine gewaltige Sammlung von Webfonts zusammengestellt. Denn eine Schrift für Webseiten ist nicht genug: Wir brauchen Schriftfamilien.

Google Webfonts stehen unter einer Open-Source-Lizenz und sind die einfachste Methode, einen Webfont in Webseiten einzubinden. Ein großer Teil der Fonts besteht aus mehr als den vier Schnitten Normal, Fett, Kursiv und Kursiv-Fett. Feinere Schnitte mit font-weight 300 und mittelstarke Schnitte mit font-weight 500 oder 600 bereichern die Auswahl und sind auf den meisten Monitoren besser lesbar als Normal oder das gewichtige Fett mit font-weight 800.
Schrift für die Webseite aussuchen
<link rel="stylesheet" type="text/css" 
    href="//fonts.googleapis.com/css?family=Lobster">
Der Link zum Font steht am besten so früh wie möglich im <head> der Seite, insbesondere aber immer vor dem ersten <script>-Tag. Steve Souders erklärt in seinem Blog, (//www.stevesouders.com/blog/2009/10/13/font-face-and-performance/), dass Internet Explorer die Seite nicht rendert, bevor der Font nicht heruntergeladen ist. Aus dem <link>-Request erzeugt das Font-Application-Interface ein Stylesheet für Firefox & Co.
@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), 
  url('//themes.googleusercontent.com/fonts/…') format('truetype');
}
und ein anderes Stylesheet für Internet Explorer
@font-face {
  font-family: 'Inconsolata';
  src: url('//themes.googleusercontent.com/fonts/…');
}
So ganz ohne kleine Einschränkungen geht die Post mit dem Webfont allerdings nicht ab. Wenn Safari, Chrome und Internet Eplorer den Font-Link entdecken, rendern sie den Rest der Seite, aber bis der Font geladen ist, zeigen sie Weißraum. Firefox hingegen zeigt den Text zunächst einmal im voreingestellten Font und berechnet die Seitendarstellung erneut, sobald der Webfont geladen ist. Diesen Effekt nennt man auch “Flash Of Unstyled Text”. Webfont in style.css Öffnet man den Link des Webfonts im Code-Editor, zeigt er die einzelnen @font-Regeln.
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), 
    url(//fonts.gstatic.com/s/roboto/v15/Hgo13….ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), 
    url(//fonts.gstatic.com/s/roboto/v15/QHD8….ttf) format('truetype');
}
Die @font-Regeln könnte man genauso gut an den Anfang der CSS-Datei setzen – das macht keinen Unterschied, außer dass die Tags im head-Block der Seite um 1 reduziert werden. Weiterhin gilt, dass die CSS-Datei vor Script-Dateien geladen werden sollen.

Wie lang wird Google Webfonts anbieten?

Google Webfonts gehören zweifellos zu den Lieblingsdiensten der Webdesigner. Alles ist so wunderbar einfach, denn wir brauchen nur ein paar Klicks, müssen keinen Account anlegen und inzwischen ist das Angebot der Schriften überwältigend. Kaum eine Webseite, die keinen Google Webfont eingebunden hat: Die Schriften werden ja nicht heruntergeladen, sondern von Google gehostet – die Zahl der Zugriffe übersteigt mein Vorstellungsvermögen. Es gibt keine Werbung – Webfonts stellt Google also auf eigene Kosten zur Verfügung. Hoffen wir mal, dass Google diesen Dienst nicht einfach fallen lässt wie etwa den beliebten Google Reader, den Google 2013 nahezu vom einen auf den anderen Tag außer Betrieb gesetzt hat.

Wie lang werden Google Fonts unterstützt

Was passiert, wenn Google tatsächlich eines Tages den Stecker zieht und die Webfonts aus dem Angebot nimmt? Über Nacht würden wir mit Arial und Times New Roman auf der Mehrzahl aller Webseiten überschüttet. Zum Glück gibt es ein breites Angebot an Open Source-Schriften für Webseiten aus anderen Quellen, z.B. von Fontsquirrel oder Adobe Edge Web Fonts.
Adobe Edge Web Fonts

Google Fonts lokal hosten

Die meisten Fonts aus dem Repertoire lassen sich auch herunterladen und auf dem eigenen Webspace bevorraten. Das ist ein Schritt zum Schutz der Besucher-Privatsphäre, dafür ist es allerdings vorbei mit dem einfachen Einbinden. Kompliziert ist es allerdings auch nicht. Auf google-webfonts-helper gibt es die Fonts zum Herunterladen und selber hosten. Auswahl und Hilfestellungen sind komfortabel, allerdings muss man seine Wunsch-Fonts schon kennen.

Google Fonts nur für ausgewählte Zeichen

Google Fonds müssen nicht komplett geladen werden, sondern der Zusatz &text beschränkt den Zeichensatz auf die Zeichen, die tatsächlich gebraucht werden.
<link
  href='http://fonts.googleapis.com/css?family=Special+Elite&text=MyText'
  rel='stylesheet' type='text/css'>
Streamline your Webfoot Request
SITEMAP BLOG