CSS, HTML und Javascript mit {stil}

CSS font-face • Fonts für HTML-Seiten

Webfonts und font-face
Mit @font-face kann jede Schrift auf einer Webseite eingesetzt werden: Der Browser wird die Schrift laden.

Ladbare Schriften – auch Webfonts genannt – standen lange auf der Wunschliste der Webdesigner, denn generell können können Browser HTML-Seiten nur mit den Schriften anzeigen, die auf dem Rechner des Besuchers installiert sind.

@font-face war zwar schon Teil von CSS2, aber wurde von CSS 2.1 auf CSS 3 verschoben, da die Probleme mit der Lizensierung erst gelöst werden mussten.

Ladbare Schriften funktionieren ähnlich wie Bilder für die HTML-Seite. Die Schrift wird über die @font-face-Regel mit der src-Eigenschaft von einem Webserver geladen werden.

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

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

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

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 älteren Version von Internet Explorer brauchen noch EOT. EOT wurde von Microsoft für IE 4 entwickelt und wird 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( Trinidatat-webfont.eot);
   src: url('Trinidat.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
      url('Trinidat.woff') format('woff'),             /* Moderne Browser */
      url('Trinidat.ttf') format('truetype'),     /* Safari, Android, iOS */
      url('Trinidat.svg#svgFontName') format('svg'); /* Ältere iOS-Geräte */
}

Die format-Syntax verhindert, dass Internet Explorer die Schriften herunterläd. Andere Browser durchforsten die Liste, bis sie einen Font-Typ finden, den sie unterstützen.

Die alternativen Schrifttypen – TrueType und SVG – kann man sich im Grunde genommen sparen, auch iPhone und iPad unterstützen heute Woff.

Bleisatz

font-face Support in den Browsern

ChromeExplorerFirefoxOperaSafari
@font-face4+4+3.5+10+3.1+
WOFF6+9+3.6+10+5+

Ladezeiten für Webfonts

WOFF-Webfonts sind komprimiert und deutlich kleiner als die frühen Webfont-Formate wie EOT und TTF. Durch den Konsenz der modernen Browser müssen auch nicht mehr unterschiedliche Formate für unterschiedliche Browser angeboten werden.

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: Georgia;
   local: Georgia;                // Erst nachsehen, ob die Schrift
	                          // beim Besucher schon installiert ist

   src: url(/repos/Georgia.ttf);  // Wenn nicht, wird die Schrift vom 
	                          // Webserver geladen
}

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.

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
	
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:400,300italic,600">

Die meisten Font-Anbieter arbeiten auf einer Subscription-Basis mit großen Schrift-Librarys und hosten die Fonts. 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 eingebunden. Die Seiten laden bei diesem Verfahren nicht unbedingt langsamer als läge der Font lokal auf dem Server. Meistens 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.

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=".

  • 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.
  • Fonts Live | Besonderheit: Bei Fonts Live kann die Webseite testweise mit der Schrift angezeigt werden.
  • Web Ink kostenlose Web-Fonts auf Webseiten mit bis zu 10 Besuchern am Tag. So kann man Schriften ebenfalls gut testen.
  • Kernest für 99 $ pro Jahr

Ladezeit für Fonts

Werden Schriften auf externen Servern gehostet, werden sie über eine Link-Tag in die Seite gebunden. 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 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;