Stil mit {stil}

Jun 2011

font-face – Schriften in Webseiten einbetten

Generell können können Browser unsere Webseiten nur in den Schriften anzeigen, die auch tatsächlich auf dem Rechner des Besuchers installiert sind. Wer Wert darauf legt, dass seine Seiten mit der Schrift ausgeliefert werden, auf der das Design der Seiten basiert, ist auf die wenigen websicheren Schriften angewiesen.

Seitdem Internet Explorer, Chrome, Firefox, Opera und Safari die @font-face-Regel unterstützen, können ladbare Schriften für Webseiten mit ausreichender Sicherheit eingesetzt werden.

Ladbare Schriften funktionieren ähnlich wie Bilder für die Webseite: Die Schrift muss über die @font-face-Regel von einem Webserver geladen werden, damit sie auf der Webseite eingesetzt werden kann.

@font-face { font-family: route_3; src: url(route_3.ttf); } 
    ^             ^         ^      ^           ^
    |             |         |      |           |
    |             |         |      |           +- Dateiname der Schrift im Webordner
    |             |         |      | 
    |             |         |      +- Link zur Schriftdatei
    |             |         |
    |             |         +- Frei wählbarer Name für die Schrift
    |             |
    |             +- Schriftart
    |            
    +- @font-face-Regel zum Einbinden einer Schriftdatei

h3 { font-family: route_3, sans-serif; } 

Safari unterstützt @font-face seit Version 3, Opera ist mit Version 10 dabei. Firefox bringt Freiheit für die Fonts seit Version 3.1.

TTF für alle Browser, EOT-Schriften für IE

Microsoft bietet bereits seit IE 5 das Einbinden von Schriften für Webseiten im EOT-Format, das aber nur von IE unterstützt wird. Embedded OpenType ist eine kompakte Form von OpenType-Schriften, die von Microsoft für das Einbetten in Webseiten entwickelt wurde.

Firefox, Opera und Safari unterstützen EOT nicht, können aber TrueType- und OpenType-Schriften direkt einbetten. Also brauchen wir eine Weiche im Stylesheet, damit Internet Explorer seine EOT-Fonts vorfindet und sich der Rest der Browserschaft TTF- oder OTF-Schriften herauspickt.

<style type="text/css">
@font-face {
   font-family: route_3;
   src: url(route_3.ttf);
   }
</style>

<!--[if gte IE 5]>
<style>
@font-face {
   font-family: route_3;
   src: url(route_3.eot);
   }
</style>
<![endif]-->

Lade Lade noch ein Weilchen …

Da Schriftdateien zuerst geladen werden müssen, vergrößern Sie den Transferaufwand der Webseite und verzögern den Seitenaufbau. Ein Font bringt schon mal 150 bis 240 KB mit und muss zu allem Überfluss doppelt angelegt werden, damit sowohl Internet Explorer mit EOT als auch Safari, Opera und Firefox mit TrueType bedient werden.

Dabei habe ich jetzt noch nicht einmal mitgerechnet, dass für Brotschriften auch noch ein Kursivfont und ein Fettschnitt gefragt sind.

Da macht es Sinn, bei einer halbwegs gängigen Schrift erst mal zu schauen, ob der Besucher nicht doch schon die Schrift der Wahl 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

Bei Google findet sich eine ansehnliche Liste von Webfonts, die von Google gehostet und über einen Link (Google Font API) direkt in die eigene Seite eingebunden werden können.

	
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Mehr von der Webfont-Front

zurück zum Seitenanfang