CSS/Eigenschaften/Schriftformatierung/@font-face

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Schriftbild eines Webdokuments lässt sich mithilfe von CSS formatieren. Dazu werden wie in jedem anderen Dokument auch die installierten Fonts des Betriebssystems verwendet. Ein Webautor kann daher nicht davon ausgehen, dass die gewünschte Schriftart auch auf den Rechnern der Betrachter zur Verfügung steht (siehe font-family).

Um dem entgegenzuwirken, wurde Ende der 1990er Jahre die Idee der downloadbaren Schriftarten entwickelt. Damals nur schlecht und von wenigen Browsern umgesetzt und folglich in CSS 2.1 ersatzlos gestrichen, unterstützen aber heute alle relevanten Browser diese Möglichkeit, und Webfonts setzen sich als gültiger Standard durch. Die Fonts werden dabei als Ressource eingebunden. Dies muss in Abhängigkeit vom Browser durch unterschiedliche Containerformate geschehen.

Inhaltsverzeichnis

CSS-Einbindung

Zusätzliche Schriftarten definieren Sie durch das Attribut @font-face, welches Teil des CSS Fonts Module ist.[1]

Beispiel
@font-face { font-family: 'meine-schrift'; src: url('pfad/zu/meinerschrift.ttf') format('truetype'); }

Der Parameter src muss eine gültige URL erhalten, für die Formatangabe sind folgende Werte erlaubt:

  • 'eot' bzw. 'embedded-opentype', referenziert eine Schriftart im Format „Embedded Open Type“
  • 'woff', referenziert eine Schriftart im Format „Web Open Font Format“
  • 'truetype', referenziert eine Schriftart im Format „True Type
  • 'opentype', referenziert eine Schriftart im Format „Open Type“
  • 'svg', referenziert eine Schriftart im Format „Scalable Vector Graphics“
Beachten Sie: Die Angabe des Formates sollte mit dem Format der referenzierten Datei übereinstimmen.

Hinweis

Sie sollten sicherstellen, dass Sie keine Urheberrechtsverletzung begehen, wenn Sie eigene Schriften einbinden.

Achtung!

Übrigens ist der Internet Explorer strenger als Firefox oder Google Chrome, wenn es um die Berechtigung zum Einbinden von Schriften geht. Der Entwickler einer Schrift kann über ein Flag in einer TrueType-Schriftdatei (*.ttf) die Einbindung seiner Schrift in Webseiten verbieten. Während Firefox und Google Chrome die Schrift trotz des Verbots anzeigen, übergeht der Internet Explorer die @font-face-Angabe im CSS, als sei die Schrift nicht vorhanden. Der Besucher der Webseite erhält dabei keine Fehlermeldung; wer aber die Konsole des Internet Explorer aufruft, findet die Meldung: CSS3114: Fehler bei der Berechtigungsprüfung für die OpenType-Einbettung in "@font-face". Die Berechtigung muss "Installable" sein.

Achtung!

Gemäß CSS3-Spezifikation muss der Browser für Schriften eine same-origin policy beachten.[2] Firefox und Internet Explorer (ab Version 9) halten sich daran.

Schriften von einer fremden Domain werden dabei nicht angewendet, es sei denn, derjenige, der die Domain mit der jeweiligen Schrift betreibt, erlaubt es (siehe z.B. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Dies dient dazu, die unerlaubte Verwendung von fremden Schriften zu erschweren.[3]

Um die Beschränkungen der same-origin policy nicht unbeabsichtigt auszulösen, sollten Sie Schriften auf der eigenen Domain mit relativen Pfadangaben referenzieren.

Eine so festgelegte Schriftart lässt sich wie gewohnt im CSS verwenden.

Beispiel
p { font-family: meine-schrift, arial, sans-serif; }

Schrifteigenschaften

In der @font-face-Regel können zusätzlich die Eigenschafts-Deskriptoren font-style, font-weight und font-stretch angegeben werden. Dies ist nützlich, wenn die Mitglieder einer Schriftfamilie in verschiedenen Dateien vorliegen:

Beispiel
@font-face { font-family: 'meine-schrift'; src: url('pfad/zu/meinerschrift.ttf') format('truetype'); } @font-face { font-family: 'meine-schrift'; src: url('pfad/zu/meiner-kursiven-schrift.ttf') format('truetype'); font-style: italic; } @font-face { font-family: 'meine-schrift'; src: url('pfad/zu/meiner-fetten-schrift.ttf') format('truetype'); font-weight: bold; } @font-face { font-family: 'meine-schrift'; src: url('pfad/zu/meiner-kursiv-fetten-schrift.ttf') format('truetype'); font-weight: bold; font-style: italic; }

Damit können auch die kursiven und fetten Varianten der Schriftart zum Stylen verwendet werden:

Beispiel
<style type="text/css"> span { font-family: 'meine-schrift'; } .it { font-style: italic; } .bo { font-weight: bold; } </style> <!-- … --> <p>Dies ist <code>meine-schrift</code>, auch <span class="it">kursiv</span> und <span class="bo">fett</span>. </p>

Weitere typografischen Eigenschaften (wie Schriftweite oder Unicode-Vorrat der Zeichen) für CSS sind in der W3C-Empfehlung zum CSS Fonts-Modul aufgeführt.[1]

Formate und Browser

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Details: caniuse.com

Der Internet Explorer bis Version 8 verwendet das proprietäre EOT-Format, ältere mozilla- oder webkit-Browser benötigten das Format TTF. Nur die aktuellen Versionen der Browser unterstützen das Format WOFF, welches als Arbeitsentwurf in den Standardisierungsprozess des W3C aufgenommen wurde.[4] Es gibt mehrere Anbieter, die es ermöglichen, Schriften in das Format WOFF zu konvertieren.

otf & ttf svg woff eot
IE Tick.gif (9+) Cross.gif Tick.gif (9+) IE5.5
Firefox Tick.gif (3.5+) Tick.gif (3.5+) Tick.gif (3.6+) Cross.gif
Chrome Tick.gif (4+) Cross.gif (38+) Tick.gif (4+) Cross.gif
Opera Tick.gif (10+) Cross.gif (25+) Tick.gif (15+) Cross.gif
Safari Tick.gif (3.1+) Tick.gif (3.1+) Tick.gif (5.1+) Cross.gif

Safari iOSiOS

Tick.gif Tick.gif Tick.gif (5.1+) Cross.gif
Android Tick.gif (2.2+) Tick.gif (3+) Tick.gif (4.4+) Cross.gif

Um eine möglichst breite Browserunterstützung zu erzielen, sollten die entsprechenden Schriftarten in mehreren Formaten zur Verfügung gestellt werden. Für die Internetexplorer unterhalb der Version 9 muss dafür eine Browserweiche eingerichtet werden. Dies kann beispielsweise durch das Verwenden folgender Syntax in der CSS-Ressource erreicht werden:

Beispiel
@font-face { font-family: 'meine-schrift'; src: url('pfad/zu/meinerschrift.eot#') format('eot'), url('pfad/zu/meinerschrift.woff') format('woff'), url('pfad/zu/meinerschrift.ttf') format('truetype'), url('pfad/zu/meinerschrift.svg#svgFontName') format('svg'); }
Die im Beispiel vorgestellte Browserweiche basiert darauf, dass die betreffenden MSIE beim Einlesen einer EOT-Datei an der Raute # stoppen, alle anderen Browser aber ihre Schriften einlesen.[5]

Die meisten Anbieter bieten neben einem Font-Hosting auch eine Automatisierung dieses Prozesses an, sodass, falls dies genutzt werden soll, für jede zusätzlich gewünschte font-family lediglich eine zusätzliche CSS-Datei eingebunden werden muss. Das Einbinden kann im (X)HTML-Dokument selbst (Einbinden einer externen Datei) oder im Stylesheet (@import) geschehen.

Beachten Sie: Das Einbinden zusätzlicher Ressourcen verlangsamt den Ladevorgang der Seite. Zudem hat der Webautor keinen Einfluss auf fremdgehostete Schriftarten.
Empfehlung: Eine Alternative ist das direkte Einbinden von Google-Fonts.

Anbieter

nicht-kommerzielle Anbieter

kommerzielle Anbieter

Quellen

  1. 1,0 1,1 W3C Candidate Recommendation CSS Fonts Module Level 3
  2. http://www.w3.org/TR/css3-fonts/#same-origin-restriction
  3. https://bugzilla.mozilla.org/show_bug.cgi?id=604421#c9
  4. http://www.w3.org/TR/WOFF/
  5. http://www.bloggerschmidt.de/blog/item/font-face-die-sicherste-methode-webfonts-zu-nutzen.html

Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML