Webfonts mit CSS3 @font-face richtig einsetzen

Bei einem gelungenen und stimmigen Webdesign ist die Typografie und allgemeine Schriftgestaltung wichtig. Daher widme ich mich in diesem Artikel der Erkundung von Webfonts. Ich möchte Dir zeigen, wie sich die Unterstützung von Webfonts mit CSS3 in modernen Browsern nutzen lässt, um Schriftarten nach Wahl für die Auszeichnung von Text zu verwenden.

Damit wir alle wissen, worüber wir reden, möchte mit grundlegenden Erläuterungen beginnen. Danach bewegen wir uns zu erweiterten Aspekten.

Sprungmarken:

1. Einführung
2. Webfont-Syntax
3. @font-face-Optionen
4. Cross-Browser-Kompatibilität
5. Probleme mit Webfonts
6. Webfonts selbst hosten vs. Webfont-Hosting-Service

1. Webfonts Einführung

Benutzerdefinierte Schriften im Web zu verwenden war für viele Jahre ein schmerzvoller Akt, während Webdesigner auf seltsame Textersetzungsmethoden zurückgegriffen haben wie Bildersetzung oder sIFR, die sich jedoch als ziemlich unflexibel erwiesen haben.

Damit ist endlich Schluss! Seitdem CSS Fonts Module Level 3 breite Unterstützung in allen Browsern gewann, haben sich die Dinge sehr verbessert. Kaum zu glauben, Webfonts funktionieren sogar auf den Internet Explorer 4.

Browser-Unterstützung

Die Zahlen in der Tabelle geben an, ab welcher Browser-Version Webfonts mit der CSS3-@font-face-Eigenschaft voll unterstützt wird.

Zur abschließenden Einführung zeige ich Dir ein 5-minütiges Video, worin die Verwendung von Webfonts mit CSS3 @font-face grundsätzlich erklärt wird:

2. Grundsätzliche Webfont-Syntax

Im Kern stützt sich die Webfont-Funktionalität auf zwei Dinge.

2.1 Die @font-face-Regel

Zuerst musst Du einen Block in CSS einfügen und darin eine Web-Schriftart zuweisen, die Du in Deine Webseite einbinden möchtest. Diese Informationen werden über die @font-face-Regel beschrieben. Wie folgt:

@font-face {
    ...
}

Dieser CSS-Code sollte stets am Anfang Deiner CSS-Datei stehen: Du möchtest schließlich sicherstellen, dass die Schrift zur Verfügung gestellt wird, bevor Du die Schrift für Deine Texte anwendest.

Schritt 1

Zuerst wählen wir einen font-family-Namen, um die Schrift in Deiner CSS-Datei zu identifizieren. Das kann jede Schriftart sein, die Du verwenden möchtest (Wenn der Name der Schriftfamilie Leerzeichen enthält, musst Du den Schriftnamen in Anführungszeichen setzen):

@font-face {
    font-family: 'Abril Fatface Regular';
}

Schritt 2

Weise als nächstes den Speicherort der Font-Datei zu, die Du für Deine Website nutzen möchtest:

@font-face {
    font-family: 'Abril Fatface Regular';
    src: url("AbrilFatface-Regular.otf");
}

Beachte, dass Du mehrere Speicherpfade angeben kannst und auch solltest, die durch Kommas getrennt werden:

src: local('Abril Fatface Regular'), 
     url("AbrilFatface-Regular.otf"), 
     url("AbrilFatface-Regular.eot");

Das ist es für das Wesentliche; unsere Schrift sollte nun auf unserer Website nutzbar sein.

2.2 font-family Standard Deklaration

Nachdem wir nun die Schrift in unsere Seite eingebettet haben, können wir nun irgendeinen Text mit den font-*-Eigenschaften stylen, wie wir es sonst auch tun würden:

h1 {
    font-size: 8em;
    font-family: 'Abril Fatface Regular', sans-serif;
}

Folgende Beispielgrafik zeigt den obigen Code in Aktion:

Beispiel: Zuweisung von font-family-Eigenschaft

3. Weitere @font-face-Optionen

Es gibt noch weitere Optionen, die Du der @font-face-Regel hinzufügen kannst:

@font-face {
    font-family: 'Abril Fatface';
    src: url("AbrilFatface.otf");
    font-weight: bold;
    font-style: italic;
    font-stretch: condensed;
    unicode-range: U+0026;
}

Die font-*-Eigenschaften sind für den Einsatz, wenn viele verschiedene Varianten einer Schriftart aus einer einzelnen Datei zur Verfügung stehen. Hier machen wir zum Beispiel die Angabe, dass wir, die Fett-, Kursiv- und die verkürzte Variante der Schriftart verwenden möchten, falls diese Werte verfügbar sind.

Der unicode-range-Deskriptor bestimmt, welche Glyphen Du aus der Font-Datei verwenden möchtest. U+0026 ist der Unicode für das kaufmännische UND (&), was bedeutet, dass in diesem Fall nur das kaufmännische UND aus dieser Font-Datei zur Verwendung Deiner Seite heruntergeladen werden würde. Falls Du nur einen ganz bestimmten Zeichensatz dieser Schriftart verwenden möchtest, ist dies eine gute Technik zum Sparen der Bandbreite.

4. Cross-Browser-Kompatibilität

Verschiedene Browser unterstützen eine etwas andere Gruppe von Schriftformaten. Daher solltest Du eine Reihe von Alternativen bieten:

• Web Open Font Format (.woff): Für alle modernen Browser
• Embedded Open Type: Für ältere Versionen des Internet Explorers (IE<=8)
• SVG Fonts: Für ältere Versionen von iOS Safari (3.2 bis 4.1)
• Truetype Fonts: Für ältere Versionen der Standard-Android-Browser

Die Zahlen in der Tabelle geben an, ab welcher Browser-Version das jeweilige Font-Format voll unterstützt wird.

Die CSS-@font-face-Regel für die Cross-Browser-Kompatibilität sieht dann so aus:

@font-face {
    font-family: 'abril_fatfaceregular';
    src: url('abrilfatface-regular-webfont.eot'); /* IE9 */
    src: url('abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('abrilfatface-regular-webfont.woff') format('woff'), /* Moderne Browser */
        url('abrilfatface-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
        url('abrilfatface-regular-webfont.svg#abril_fatfaceregular') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

Dies ist vermutlich etwas unschön, zum Glück brauchst Du diesen Code nicht selbst erzeugen. Online-Ressourcen wie Font Squirrel haben einfach zu bedienende Webfont-Generatoren, die aus einer Font-Datei alle Formate und CSS-Code generieren, den Du benötigst.

5. Probleme mit Webfonts

Bisher habe ich Dir gezeigt, wie Du das Webfont auf den Server laden und die Schrift Cross-Browser-kompatibel über CSS zuweisen kannst. Lass uns nun einen Schritt weiter gehen und einen Blick auf ein paar Probleme werfen, die bei Verwendung von Webfonts aufkommen können, zusammen mit Lösungsvorschlägen.

5.1 Schlechte Umsetzung

Umfangreiche Tests in allen gängigen Browsern sind von großer Wichtigkeit: Auch wenn die CSS-Einbindung problemlos verlaufen sein sollte, könnte die Umsetzung der Schrift dennoch schlecht dargestellt werden, speziell im Internet Explorer und Chrome/Blink-basierten Opera unter Windows. Dies kann eine Vielzahl von Gründen haben, aber die wichtigsten sind:

• Verwendung von ClearType: ClearType ist eine Windows-Technologie, die Subpixel-Rendering nutzt, um Schriften glatter erscheinen zu lassen. Nicht aktiviert, können Schriften sehr schlecht aussehen, obwohl es auf den meisten Windows-Systemen standardmäßig eingeschaltet ist. Im Allgemeinen ist es jedoch noch nicht so effektiv wie Mac OSX Anti-Aliasing. Beachte, dass andere Browser auf Windows ihre eigenen Subpixel-Rendering-Systeme haben.
  Weitere Information hierzu findest Du in den Beitrag „Display Type & the Raster Wars“ von Jon Tan.
• Das Google Webfonts Rendering hatte zeitweise ein paar Probleme auf dem Chrome-Browser für Windows. Einzelheiten zu diesem Fehler kannst Du bei Chromium, einem Open-Source-Projekt von Google Chrome, nachlesen.
• Einige Schriften (meistens kostenlose) verfügen nur über eine geringe Auswahl von Zeichen, was bedeutet, dass, wenn Du ein Zeichen für Deinen Inhalt einsetzen möchtest, für das eine Glyphe nicht vorhanden ist, würde ein Leerzeichen mit hässlichen Quadraten angezeigt werden, statt des Zeichens. Um solche negativen Auswirkungen zu mildern, solltest Du sicherstellen, dass Du immer eine Fall-Back-Schriftart angibst, auch wenn Du eine Web(sichere)-Schrift verwendest.

  Beispiel:

  font-family: 'Abril Fatface Regular', arial, sans-serif; 

  (arial = Fall-Back-Schriftart)

5.2 FOUT

FOUT steht für „Flash of Unstyled Text“ und beschreibt einen Effekt, der beim Rendern von Webfonts eintreten kann. Dies geschieht, wenn zunächst das „ungeschminkte“ Font – also der websichere Fallback – auf Deiner Seite erscheint, während das HTML geladen wird, das Webfont jedoch noch nicht. Der Browser (Während es zunehmend von vielen Browsern kein Problem mehr darstellt, zeigt sich dieser Effekt noch bei früheren Firefox- und Opera Versionen und Internet Explorer < 10) rendert den Text also mit einem Webstandard-Font.

Erst wenn die individuelle Font-Datei vollständig geladen ist, wechselt die Ansicht, was als kurzes Flackern wahrgenommen wird. Je größer die Unterscheidung zwischen dem nachgeladenen Font und dem websicheren Fallback, desto augenfälliger wird dieser Effekt.

Lösungsansätze

Es gibt eine Reihe von nützlichen Quellen mit Techniken, um diesen störenden Effekt entgegen zu wirken. Auf zwei von ihnen möchte ich Dich kurz hinweisen:

1. Paul Irish beschreibt in seinem Artikel „Fighting the @font-face FOUT“ eine JavaScript basierte Lösung, die das Verhalten vom Webkit nachbildet, um so den FOUT-Effekt zu unterdrücken.
2. Eine weitere zuverlässige Technik wird mit der Google Web Font Loader-Methode beschrieben. Diese JavaSript-Bibliothek erkennt, ob Deine Webfonts noch geladen werden und vergibt den Tags des Dokuments spezielle Klassen, um ihren Status anzuzeigen. Du kannst diese dann verwenden, um Elemente zu verstecken bis die Schriften geladen sind.

   Beispiel:

   .wf-loading h1 {
       visibility: hidden;
   }
   

   Sobald die angeforderte Schrift geladen worden ist, wird eine spezielle Klasse dem Tag zur Indizierung zugewiesen, damit Du die Anzeige des Elements angemessen aktualisieren kannst.

   .wf-lobster-n4-active h1 {
       visibility: visible;
       font-family: lobster;
   }
   

5.3 Hohe Bandbreite

Das Hinzufügen von Webfonts auf Deiner Webseite bedeutet leider Performance-Einbußen. Daher solltest Du die Anzahl der Schriftarten auf Deiner Website begrenzen. Es gibt jedoch auch einzige Schriftarten, die alleine schon sehr groß sind, vor allem wenn es eine CJK-Schrift ist, die tausende von Glyphen beinhalten kann.

Um dieses Problem zu mildern, kannst Du folgendes tun:

• Erstelle eine modifizierte Schriftart-Datei, die nur die Schriftzeichen enthält, die Du tatsächlich verwenden möchtest. Um dies zu tun, benötigst Du einen Font-Editor wie FontForge.
• Verwende nur die tatsächlich benötigten Zeichen aus der Font-Datei. Mit Hilfe der unicode-range-Eigenschaft kannst du diese den @font-face-Block zuweisen.

Beispiel:

@font-face {
    font-family: 'Abril Fatface';
    src: url("AbrilFatface.otf");
    unicode-range: U+0026;
}

Hier gibt die unicode-range-Eigenschaft an, nur das UND-Zeichen aus der Schrift zu laden.

unicode-range wird von den meisten modernen Browsern unterstützt mit Ausnahme des Firefox-Browsers.

5.4 Browser-Bugs und Eigenheiten

Hier einige erwähnenswerte Browser-Bugs:

• IE9 Fehler mit dem Herunterladen von EOT
  Wenn Du – wie am Anfang dieses Kapitels beschrieben – die Bulletproof @font-face Syntax verwendest, wird der Internet Explorer 9 (und neuere IE-Versionen) die EOT-Version der Schrift herunterladen und verwenden.
• Fehler Bei Cross-Domain-Schrift
  Gemäß der Spezifikationen kannst Du Schriften nicht über einer anderen Domain mittels CSS laden (obwohl Chrome, Safari und Opera dies inkorrekter Weise zulassen). Um diese Einschränkung zu umgehen, könntest Du die CORPS-Methode anwenden.
• IE6-8 lädt zugewiesene Schriften herunter, die nicht verwendet werden
  Mit der @font-face-Regel solltest Du keine Schriften zuweisen, die Du auf Deiner Website schlussendlich nicht einsetzen möchtest; der Internet Explorer 6 bis 8 würde sie ansonsten herunterladen.
• Schriften von IIS-Server
  Falls Du Schriften von einer IIS-Plattform verwendest, solltest Du für „.wof“ den MIME-Type „application/x-font-woff“ verwenden, obwohl WOFF über keinen MIME-Type verfügt. IIS verweigert nämlich seinen Dienst, für das es keinen MIME-Type gibt.

6. Selbst hosten vs. Hosting-Dienstleister

Selbst gehostete Schriften beanspruchen mehr Bandbreite und sind etwas aufwändiger einzurichten. Generell wirst Du jedoch mehr Kontrolle über die Schriften haben, die Du selbst einbindest. Auf der anderen Seite lassen sich Schriften von Hosting-Anbietern zügiger und zuverlässiger einbinden (inklusive allen Cross-Browser-Eigenschaften).

6.1 Webfonts zum Selberhosten

Einige der folgenden Quellen sind kostenfrei und andere nicht. Es gibt eine Menge von qualitativ hochwertigen kostenlosen Schriften, aber letzten Endes bekommst Du das, wofür Du auch bezahlst: kostenfreie hochwertige Schriften neigen in irgendeiner Weise dazu, begrenzt oder mit stets kritischem Blick einsatzfähig zu sein, sei es durch eine begrenzte Anzahl von Zeichen oder mangelhaft verfügbaren Varianten oder weil sie wegen Massenverwendung ihren Reiz verloren haben. Wenn Du großen Wert auf Originalität und Einzigartigkeit legst, dann bist Du mit kostenpflichtigen Schriften besser bedient.

Kostenlose Webfonts:

• Font Squirrel
• Da Font
• League of Movable Type
• Lost Type

Weitere Kostenfreie Fonts:

• The Best Free Fonts for Designers

Kostenpflichtige Webfonts:

• Font von Hoefler & Co
• Linotype
• House Industries

6.2 Google Fonts

Google Fonts ist ein kostenloser großartiger Font-Service mit verhältnismäßig hochwertigen und sehr einfach zu implementierenden Schriften. Dieser Service hat aber die gleichen Kritikpunkte wie die meisten anderer kostenlosen Schrift-Anbietern: viele der besseren Schriften sind durch die Massenverwendung für den eigenen Gebrauch unattraktiv und die verfügbaren Optionen sind ziemlich begrenzt.

6.3 Premium Schrift-Dienstleister

Es gibt eine Reihe von kostenpflichtigen Font-Dienstleistern, bei denen Du Zugang zu qualitativ hochwertigen Schriften mit vollen Glyphensätzen und mehreren Schriftschnitten und Varianten erhältst. Sie funktionieren sehr ähnlich.

In der Regel:

• Registrierst Du dich bei einem Dienst
• Gibst die Domain(s) an, für die Du die Schriften einsetzen möchtest
• Wählst Du die Schrift(en) aus, die Du verwenden möchtest
• Fügst Du ein wenig benutzerdefiniertes CSS und manchmal JavaScript in Deine Website hinzu.
• Testest Du deine Font-Auswahl
• Bezahlst Du die Schriftarten pro Jahr, pro Schrift oder pro Website

Empfehlenswerte Dienste sind:

1. Typekit
2. Fontdeck