CSS font-face Regel • Webfonts laden

font face Regel: Externe Schriftdateien in die Webseite laden

@font-face bindet Schriften von einem Webserver in die Webseite ein. Ladbare Schriften oder Webfonts funktionieren ähnlich wie Bilder in HTML-Seiten. Sie werden als ausgelagerte Ressource der HTML-Seite geladen und bringen ein hohes Maß an Sicherheit, dass alle Systeme die Seiten mit derselben Schrift anzeigen.

Schriften, die sich wie ein Bild als externe Ressource in die Webseite laden lassen, standen lange auf der Wunschliste der Webdesigner, denn generell können können Browser Webseiten nur mit den Schriften anzeigen, die auf dem System des Besuchers installiert sind.

Heute beherrschen alle modernen Browser das Einbinden von Schriften im Format WOFF (ab IE9). WOFF2 ist jünger und komprimiert die Schriftdatei besser, wird aber noch nicht von IE11 unterstützt.

Schrift mit font-face einbinden

@ font-face war zwar schon Teil von CSS2, aber wurde von CSS 2.1 auf CSS 3 verschoben, um vorab die Probleme mit der Lizensierung zu lösen.

@font-face-Regel bindet Schriftdateien ein
     |
     |      Frei wählbarer Name für die Schrift
     |              |
@font-face {        |
    font-family: Route; 
    src: url(/fonts/route/Route.woff2),
         url(/fonts/route/Route.woff); } 
             ^
             |
             +- Link zur Schriftdatei

Den Elementen der Webseite wird die Schrift über den Namen zugewiesen.

body { font-family: Route,'Bitstream Vera',sans-serif } 

Nach dieser Vorarbeit können die Schriften den HTML-Elementen zugewiesen werden. Obwohl Webfonts relativ sicher von allen Browsern erkannt werden, dient eine Liste von Alternativen als zusätzliche Absicherung (woff2, woff).

Ladbare Schriften bescheren uns einen großen Spielraum und ein hohes Maß an Sicherheit, dass alle Systeme die Seiten mit derselben Schrift anzeigen. Der Spielraum erschöpft sich nicht nur in einer größeren Auswahl, sondern in zusätzlichen Schnitten – z.B. in dünneren und mittelfetten Schnitten (font-weight: 300, font-weight: 500).

Schriften beim Besucher

WOFF-Webfonts sind komprimiert und deutlich kleiner als die frühen Webfont-Formate wie EOT und TTF. WOFF2 ist noch einmal um rund 30% kleiner als WOFF. Durch den Konsenz der modernen Browser müssen auch nicht mehr die ganze Front der alten Formate (TTF, EOT und SVG) für unterschiedliche Browser angeboten werden, heute reichen WOFF2 und WOFF.

Dennoch macht es Sinn, bei einer halbwegs gängigen Schrift erst mal zu schauen, ob der Besucher die Schrift der Wahl vielleicht schon auf seinem eigenen Rechner hat.

@font-face {
    font-family:'Roboto';
    font-style: normal;
    font-weight: 400;
    src: 
      local('Roboto'),          // Erst nachsehen, ob die Schrift 
      local('Roboto-Regular'),  // beim Besucher schon installiert ist
      url(fonts/roboto-v18-latin-regular.woff2) format('woff2'), // Wenn nicht, wird die Schrift vom Webserver geladen
      url(fonts/roboto-v18-latin-regular.woff) format('woff');   // Am Ende das Schlusslicht für IE11
}

Gerade beliebte Schriften wie Open Sans, Roboto und Noto finden wir heute in vielen Betriebssystemen bereits vor und müssen das Laden der Schriftdatei nicht erzwingen.

WOFF (Web Open Font Format)

WOFF ist ein vom W3C standardisiertes Format für Web-Schriften, das die Formatvielfalt und Unsicherheit der frühen Webfonts beendet. WOFF ist ein komprimiertes TTF mit Meta-Informationen, das von den Mainstream-Browsern und Font-Designern unterstützt wird. Zu den Meta-Informationen können z.B. die Lizenzbestimmungen gehören – die allerdings nicht von den Browsern verifiziert werden.

Mit den aktuellen Browser- und Betriebssystem-Versionen können WOFF-Schriften eingesetzt werden.

Nur die echten Antiquitäten von Internet Explorer brauchen noch EOT. EOT wurde von Microsoft für IE 4 entwickelt und wurde nur von Internet Explorer bis Version 9 unterstützt. Die font-face-Syntax erlaubt Alternativen, wenn ein Höchstmaß an Kompatibilität in allen Browsern gefordert ist.

@font-face {
   font-family: 'Trinidat';
   src: url('Trinidat.woff2') format('woff2'),  /* Moderne Browser */
        url('Trinidat.woff') format('woff'),    /* IE 11 */
        url('Trinidat.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
        url('Trinidat.ttf') format('truetype'),     /* Safari, Android, iOS */
        url('Trinidat.svg#svgFontName') format('svg'); /* Ältere iOS-Geräte */
}

Die format-Syntax verhindert, dass die ganz alten IEs die Schriften herunterladen. Andere Browser durchforsten die Liste, bis sie einen Font-Typ finden, den sie unterstützen.

Bleisatz

Quellen für Webfonts

Google Web Fonts hostet eine Liste von Webfonts. Die Web Fonts werden über einen einfachen Link (Google Font API) in die eigene Seite eingebunden.

Google Fonts zum Einbinden in Webseiten
	
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:400,300italic,600">

Wenn nur ein eingeschränkter Satz von Zeichen eingesetzt wird – z.B. um das Logo durch eine eigene Schrift herauszustellen –, bietet Google die Option "text=".

Fonts auf Subscription-Basis

Die meisten Font-Anbieter arbeiten auf einer Subscription-Basis mit großen Schrift-Librarys und hosten die Fonts auf ihren eigenen Servern. Genauso wie bei Google Webfonts wird der Code zum Einbinden der Schrift on the fly erzeugt.

Der Font bleibt auf dem Server des Anbieters und wird beim Aufruf der Seite geladen und eingebunden. Die Ladezeit der Seiten ist bei diesem Verfahren nicht unbedingt länger als läge der Font lokal auf dem Server. U.U- wird dieses Verfahren die Schrift sogar schneller laden als eine Schriftdatei vom eigenen Server.

Dennoch ist in Hinsicht auf die Ladezeit Umsicht geboten, denn Fonts können ein dickes Paket darstellen, zumal, wenn verschiedene Schriftschnitte eingesetzt werden. Darum stellt Google Pakete wie in dem Beispiel oben zusammen: 400 für die normale Schrift, 600 für einen mittelfette und 300italic für den kursiven Schriftschnitt.

  • Typekit bietet mit der Trial Library einen freien Zugriff auf Webfonts für Webseiten mit bis zu 25.000 Pageviews pro Monat.
  • Font Squirrel hostet vor allem kommerzielle Schriften als Freeware.

Bei der Nutzung von Fonts, die von externen Anbietern gehostet werden, die Informationspflicht in der Datenschutzerklärung beachten!

Webfonts und ihre Ziffern

Genauso wie für die klassischen Systemschriften lohnt es sich, auch auf die Ziffern der gewählten Schrift zu achten. Wer Zahlenkolonnen oder Terminlisten setzt, findet in vielen Schriftfamilien proportionale Ziffern. Dann stehen in rechtsbündigen Spalten die Ziffern untereinander.

Ubuntu
923456789.111
111496139.968

Open Sans
123456789.111
111496139.968

Josefin Sans
123456789.111
111496139.968

Varianten: link-Tag, Import, @font-face-Regel in der CSS-Datei

Die einfachste Variante, ladbare Schriften von externen Servern einzubinden, ist das Link-Element. So sieht z.B. der Link zu Fonts aus der Google-Webfont-Sammlung aus:

<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500,300italic' rel='stylesheet' type='text/css'>

Alternativ zeigt Google die Import-Regel für den Font an:

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500,300italic);

Beide Methoden wirken sich nachteilig auf die Ladezeit aus. Besser ist es, die font-face-Regeln direkt in die CSS-Datei der Seite oder über ein style-Tag im Kopf der Seite einzubinden. Der Browser zeigt die font-face-Regeln anhand der URL:

https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500,300italic
Ladbare Schriften: font-face-Regeln für die CSS-Dateihttps://fonts.googleapis.com/css?family=Fira+Sans:400,300,500,300italic@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 300;src: local('Fira Sans Light'), local('FiraSans-Light'), url(https://fonts.gstatic.com/s/firasans/v5/VTBnrK42EiOBncVyQXZ7j6RDOzjiPcYnFooOUGCOsRk.woff) format('woff');}@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 400;
Fonts More scripts About Analytics New to Google Fonts? 648 font families shown Word Sentence Paragraph Poster Preview Text: Grumpy wizards make toxic brew for 28 px Size: Sorting: Popularity Filters: Normal 400 All categories Thickness Slant Width Grumpy wizards make toxic brew for the evil Queen and Jack. Add to Collection Open Sans, 10 Styles by Steve Matteson