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.

CSS-Einbindung

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

Details: caniuse.com

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

Sie müssen sicherstellen, dass Sie keine Urheberrechtsverletzung begehen, wenn Sie zusätzliche Schriften einbinden. Folglich müssen Sie entweder die zur Einbindung nötigen Rechte erwerben oder eine freie Schrift verwenden.

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“
  • 'woff2', referenziert eine Schriftart im Format „Web Open Font Format 2“, dem Nachfolger von WOFF und bietet eine bessere Kompression gegenüber dem Vorgänger
  • '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 – die Dateiendung stimmt nicht zwangsläufig mit dem Namen des Formats überein.

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

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

Formate und Browser

Der Internet Explorer bis Version 8 unterstützt ausschließlich das proprietäre EOT-Format, ältere Mozilla- oder WebKit-Browser benötigten das Format TTF (TrueType). Alle aktuellen Versionen der Browser unterstützen das standardisierte[2] und für das Web angepasste Format WOFF oder dessen Nachfolger WOFF2. Es gibt mehrere Anbieter, die es ermöglichen, Schriften in das Format WOFF zu konvertieren. Beispielsweise können mit dem „Webfont Generator“ von fontsquirrel.com Schriften nach WOFF und WOFF2 konvertiert werden.

otf & ttf svg woff woff2 eot
IE Edge Tick.gif (9+) Cross.gif Tick.gif (9+) Tick.gif (14+) Tick.gif (5.5+)
Firefox Tick.gif (3.5+) Cross.gif Tick.gif (3.6+) Tick.gif (39+) Cross.gif
Chrome Tick.gif (4+) Cross.gif (38+) Tick.gif (4+) Tick.gif (38+) Cross.gif
Opera Tick.gif (10+) Cross.gif (25+) Tick.gif (15+) Tick.gif (24+) Cross.gif
Safari Tick.gif (3.1+) Tick.gif (3.1+) Tick.gif (5.1+) Tick.gif (10+) Cross.gif

Safari iOSiOS

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

Um eine möglichst breite Browserunterstützung zu erzielen, reicht bereits die Verwendung von WOFF und WOFF2. Alle möglichen Formate anzubieten, ist zwar möglich, macht aber wenig Sinn, da die betroffenen Browser nur noch extrem geringe Marktanteile besitzen. Wesentlich wichtiger ist die Angabe einer generischen Schriftfamilie oder die von Fallback-Schriftarten via font-family, da auch Browser, die @font-face und mindestens eines der gewählten Formate beherrschen, auf eine vorhandene Schriftart zurückfallen müssen, wenn die Font-Ressource (noch) nicht geladen werden konnte. Dies kommt auch Browsern zu Gute, die @font-face nicht unterstützen – diesen Browsern können Sie auf diesem Weg eine möglichst passende lokal vorhandene Ersatz-Schriftarten vorschlagen.

Im folgenden Beispiel wird eine Schrift namens „meine-schrift“ eingebunden und auf das p-Element angewendet (beachten Sie auch die angegebenen Alternativ-Schriftarten):

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

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

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.

Fallstricke

Der Internet Explorer ist 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.

Gemäß CSS3-Spezifikation muss der Browser für Schriften eine same-origin policy beachten.[3] 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.[4] Um die Beschränkungen der same-origin policy nicht unbeabsichtigt auszulösen, sollten Sie Schriften auf der eigenen Domain mit relativen Pfadangaben referenzieren.

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', sans-serif; }
.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]

Anbieter

kostenlose Schriftarten

kostenpflichtige Schriftarten

  • fonts.com, bietet bekannte Schriften wie Helvetica oder Frutiger
  • ...

Quellen

  1. 1,0 1,1 W3C Candidate Recommendation CSS Fonts Module Level 3
  2. http://www.w3.org/TR/WOFF/
  3. http://www.w3.org/TR/css3-fonts/#same-origin-restriction
  4. https://bugzilla.mozilla.org/show_bug.cgi?id=604421#c9

Siehe auch

Weblinks