Webfonts / Schriften mit CSS in HTML einbinden

CSS @font-face

Mit der @font-face-Regel könnt ihr jede Schrift auf der Webseite einsetzen: Der Browser wird die Schrift laden.
Webfonts standen lange auf der Wunschliste der Webdesigner, denn generell können können Browser unsere Webseiten nur in den Schriften anzeigen, die auch tatsächlich auf dem Rechner des Besuchers installiert sind.
@font-face war zwar schon Teil von CSS2, aber wurde von 2.1 auf CSS3 verschoben, da die Probleme mit der Lizensierung erst gelöst werden mussten.
WOFF (Web Open Font Format) 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 zusätzlichen Informationen, das von den Mainstream-Browsern und Font-Designern unterstützt wird.

WOFF in allen modernen Browsern

Mit den jüngsten 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.
Ladbare Schriften funktionieren ähnlich wie Bilder für die Webseite: Die Schrift muss über die @font-face-Regel mit der src-Eigenschaft von einem Webserver geladen werden, damit sie auf der Webseite eingesetzt werden kann.
Nach dieser Vorarbeit könnt ihr die Schriften den HTML-Elementen zuweisen. Aber auch wenn Webfonts relativ sicher von allen modernen Browsern erkannt werden, kann eine Liste von Alternativen als zusätzliche Absicherung dienen.

h3 {
font-family: Route, Verdana, 'Bitstream Vera', sans-serif;
}

Die font-face-Syntax erlaubt Alternativen.

@font-face {
font-family: 'TinoTrinidat';
src: url( assets/Tino-Trinidatat-webfont.eot);
src: local ('Ø'), url( assets/Tino-Trinidat-webfont.woff) format('woff'), url( assets/Tino-Trinidat-webfont.ttf) format('truetype'), url( assets/Tino-Trinidat-webfont.svg) format('svg');
}

Das Sonderzeichen sorgt dafür, dass nicht ein zufällig gleichnamiger Font vom lokalen Rechner des Besuchers benutzt wird.
Die format-Syntax verhindert, dass Internet Explorer die Schriften herunterlädt. 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.

Ladezeiten für Webfonts

WOFF-Webfonts sind komprimiert und deutlich kleiner als die frühen Webfont-Formate wie EOT und TTF. Durch den Konsens 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
}

Vorteil: Ihr müsst euch nicht um das Datenvolumen kümmern, weil die Schrift vom Anbieterserver geladen wird. Außerdem seid ihr, was die Lizenzierung angeht, in jedem Fall auf der sicheren Seite, weil ihr auf eurem Server keine Schriftdatei zum Download zur Verfügung stellt, was zu Problemen führen kann, wenn ihr eine vermeintlich freie, in Wirklichkeit aber kommerzielle Schriftart anbietet, bei der nur der Urheberrechtshinweis entfernt wurde. Deshalb ist es besonders wichtig, auf die Herkunft der Schriftart zu achten.
Der Nachteil dabei: Sollte der Anbieterserver einmal nicht verfügbar oder stark beansprucht sein, wird die Schrift nicht oder verzögert geladen. Außerdem kann der Anbieter so die Besucher eurer Website loggen, was streng genommen eine Erweiterung der Datenschutzerklärung auf eurer Website nötig macht.

Kostenlose Schriftpakete:

• http://www.fontsquirrel.com/
• http://www.fontsquirrel.com/fontface

Anleitung – Einbindung:

• http://www.elmastudio.de/typografie/schriften-mit-font-face-einbetten-so-funktionierts/
• https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie/Schriftformatierung#.40font-face

Übersicht der Webfont-Formate

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, …
Sich im Dschungel der Fontformate zurecht zu finden, ist nicht gerade einfach. Bei dieser Auswahl werden nur die Formate genauer beschrieben, die für den Einsatz auf Webseiten besondere Relevanz besitzen.

TrueType

Dieses Format wurde Ende der 1980er Jahre als Alternative zu Adobes PostScript-Schriften-Formaten entwickelt. Als skalierbares Outline-Format löste es die bis dahin bei der Bildschirmdarstellung üblichen Bitmap-Fonts ab. In der Folge wurde es auch von Microsoft übernommen und entwickelte sich rasch zu dem Format für Systemschriften. Der Grund liegt vor allem in der Möglichkeit, die Bildschirmdarstellung sehr präzise und abgestimmt auf die jeweilige Schriftgröße kontrollieren zu können.

OpenType

Dieses Format wurde in Partnerschaft von Microsoft und Adobe entwickelt. Es setzt direkt auf dem TrueType-Format auf, bietet aber optionale, erweitere typografische Funktionen (Ligaturen, Bruchziffern, Kontextbedingte Alternativzeichen etc.), die vor allem in professionellen Design-Anwendungen zum Einsatz kommen und bislang leider in Browsern noch unzureichend unterstützt werden.
Wichtig zu wissen ist ferner, dass OpenType-Fonts in zwei Arten vorliegen können, je nachdem welche Outline-Technologie zum Einsatz kommt. Es gibt OpenType-Fonts mit TrueType-Outlines (OpenType TT) und solche mit PostScript-Outlines (OpenType PS). Letzteres werden häufig auch CFF-basiert (Compact File Format) genannt. Dies spielt beim Einsatz als Webfonts eine Rolle, da unter Windows die PostScript-basierten Fonts derzeit meist ohne Subpixel-Rendering dargestellt werden, was die Darstellungsqualität beträchtlich verschlechtert. Hier sind also die TrueType-basierten Fonts klar zu bevorzugen, auch wenn Microsoft dieses Problem in Zukunft ausmerzen wird.
Da sich TrueType- und OpenType-Fonts strukturell sehr ähneln, gilt die Unterstützung in der Regel für beide Formate. Bei Browsern ist eine Unterstützung gegeben seit Safari 3.1, Firefox 3.5 und Opera 10.

EOT

Das Format Embedded OpenType (EOT) wird seit Ende der 1990er Jahre im Internet Explorer eingesetzt. Es ist eine Abwandlung des TrueType bzw. OpenType-Formates, die sich durch zwei Besonderheiten auszeichnet: Zum einen sind EOT-Fonts in der Regel für eine schnellere Auslieferung im Web komprimiert. Zum anderen lassen sich EOT-Fonts an bestimmte Webseiten koppeln (URL Binding). Der Font funktioniert dann nur auf den so voreingestellten Webseiten. Ein unberechtigtes Kopieren zu einer anderen Domain ist nicht möglich.
EOT funktioniert ausschließlich im Internet Explorer. Auch wenn es sicherlich als Webfont-Format keine Zukunft hat, bietet es sich derzeit noch an, dieses Format auszuliefern, um auch die Benutzer der verschiedenen IE-Versionen mit Webfonts zu versorgen.
Ein aktuelles Windows-Programm zum kostenlosen Erstellen von komprimierten EOT-Fonts ist [icon name=”angle-double-right”] EOTFast.

WOFF

Das Web Open Font Format (WOFF) schickt sich derzeit an, der Standard für Schrift auf Webseiten zu werden. Es ist als ein Kompromiss zwischen Schrift- und Browser-Herstellern entstanden. Und so verwundert es auch nicht, dass das Format von zwei Schriftgestaltern und einem Mozilla-Entwickler in Gemeinschaft entwickelt wurde. Streng genommen ist WOFF kein neues Format, sondern eher ein Container-Format um das weit verbreitete OpenType-Format.
Auch bei WOFF ist wie beim EOT-Format eine Komprimierung direkt integriert. Darüber hinaus können Meta-Daten hinterlegt sein, die zum Beispiel eine Nutzungslizenz ausweisen, auch wenn diese Daten allenfalls Informationscharakter haben und in keiner Weise von Browser überprüft werden.
Mozilla kann seine Hausschrift FF Meta dank einer WOFF-Lizenz nun ohne Umwege auf der eigenen Webseite verwenden. Firefox unterstützt das Format seit Version 3.6 und eine Standardisierung durch das W3C ist derzeit im Gange. Alle anderen Browserhersteller arbeiten bereits an einer Integration in kommende Browser-Versionen.
Zur Konvertierung in das WOFF-Format kann der kostenlose Online-Dienst von [icon name=”angle-double-right”] Fontsquirrel benutzt werden.

SVG

Innerhalb des Vektorgrafik-Formates SVG lassen Fonts direkt in die entsprechenden SVG-Dateien einbetten. Man spricht meist von SVG-Fonts, wobei es sich in technischer Hinsicht dann kaum noch um Fonts im eigentlichen Sinne handelt. Vielmehr sind die Umrisslinien der einzelnen Buchstaben hinterlegt und sie werden dann entsprechend auf der Zeichenfläche der SVG-Grafik dargestellt.
Das Format hat im Zusammenhang mit Webfonts aktuell dennoch Relevanz, da es momentan das einzige der hier beschriebenen Formate ist, das auf iPhone und iPad im Mobile Safari benutzt werden kann.