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.


Anzeige

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.

Eigenschaft
@font-face 9.0 4.0 3.5 3.2 10.0

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:


Anzeige

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';
}


Die Schrift „Abril Fatface“ kannst Du auf Font Squirrel finden, eine großartige Quelle von kostenfreien Webfonts.

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");
  • Zeile 1: Der Browser wählt den Speicherpfad, der als erstes funktioniert. In diesem Fall werden wir den Browser darum bitten, zunächst zu überprüfen, ob die Schrift auf Deinem- bzw. auf dem Rechner der Website-Besucher installiert ist. Und falls sie installiert ist, soll die lokale Schriftversion verwendet werden (nützlich, um potentiell etwas Bandbreite zu sparen).
  • Zeile 2: Als nächstes fügen wir eine Referenz auf ein Open Type Font Format ein.
  • Zeile 3: Als letztes binden wir eine Embedded Open Type-Version für ältere Versionen des Internet Explorers ein.

Sei Dir bewusst, dass Du nicht auf eine andere Schriftart verweisen kannst, die auf einer anderen Domain liegt, es sei denn, Du nutzt CORPS, eine Apache-spezifische Lösung.

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.


Anzeige

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.

Font-Eigenschaften Werte Beschreibung
font-family Name Erforderlich. Definiert den Namen der Schriftart.
src URL Erforderlich. Definiert die URL(s), wo die Schrift heruntergeladen werden soll.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Legt fest, wie die Schrift gestreckt wird. Der Standardwert ist „normal“.
font-style normal
italic
oblique
Optional. Legt fest, wie die Schrift gestaltet werden soll. Der Standardwert ist „normal“.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Definiert die die Stärke des Schriftschnitts. Der Standardwert ist „normal“
unicode-range Unicode-Bereich Optional. Definiert den Bereich von Unicode-Zeichen, die die Schrift unterstützt. Der Standardwert ist „U+0-10FFFF“.

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.

Font Format
TTF/OTF Fonts 9.0* 4.0 3.5 3.1 10.0
WOFF Fonts 9.0 5.0 3.6 5.1 11.1
SVG Fonts Kein Support 4.0 Kein Support 3.2 9.0
EOT Fonts 6.0 Kein Support Kein Support Kein Support Kein Support

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.

Für weitere Informationen zu @font-face empfehle ich einen interessanten Artikel über Bulletproof @font-face-Syntax von Paul Irish.

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.

Falls Du mehrere Zeichen dem Unicode-Bereich zuzuordnen möchtest, gibt es hier weitere Informationen dazu.

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

Wenn Du unicode-range auf den Firefox oder älteren Browsern anwenden möchtest, kannst Du dies mit Hilfe eines kleinem jQuery-Plugins „CSS3 unicode-range polyfill“ tun.

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:

Weitere Kostenfreie Fonts:

Kostenpflichtige Webfonts:

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
War dieser Artikel hilfreich? Ja Nein
Jonathan

Hi, ich bin Jonathan Torke, WordPress-Programmierer. Auf pixeltuner.de blogge ich über Webdesign und Social Media. Außerdem teile ich über Twitter täglich frische Ressourcen für Webdesigner und -Entwickler. Du findest mich auch bei Google+, Facebook und deviantART.

3 Antworten auf "Webfonts mit CSS3 @font-face richtig einsetzen"
  • Ralf:

    Hallo Jonatan,

    danke für deinen Artikel. Mometan kann ich nix hinzufügen. Interessant wäre noch, wie das mit den Lizenzen ist, wenn man Google Fonts herunterlädt und über seinen eigenen Server ausliefert.

    Aber: Hast du dir diesen Chrome Fehler mal genauer angesehen? Ich konnte noch keine genauere Lösung dazu finden. Die Fonts sehen im Chrome einfach schlimm aus.

    Wenn du Ideen hast, sehr gerne!

    Gruß Ralf

    • LGK:

      Das Problem mit der unschönen Renderung scheinen alle Browser zu haben, die auf WebKit basieren. Zu mindest unter Windows.

      Ich habe leider auch noch keine Methode gefunden, womit man diesen Schönheitsfleck beseitigen kann.

  • Bruno Baketaric:

    Der Abschnitt 3 stimmt so nicht – zumindest nicht, wie ich ihn verstanden habe. Die Optionen sind nicht dafür da, um „aus einer einzelnen Datei“ einen Schrift-Schnitt zu extrahieren, sondern für das Gegenteil: Üblicherweise kommen die verschiedenen Schrift-Schnitte (Regular, Bold, Italics…) einer Schrift in unterschiedlichen Dateien. Durch Verwendung dieser sog. font-properties kann man diese dann dennoch unter einem einzigen Namen ansprechen, anstatt für jeden Schnitt einen eindeutigen Namen verwenden zu müssen.

    Das nennt sich StyleLinking, ist bei FontSpring ganz gut erklärt und sollte immer verwendet werden, wenn man mehrere Schnitte einer Schrift verwendet: http://www.fontspring.com/support/troubleshooting/style-linking

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Jetzt das eigene Projekt starten mit den webgo Webhosting Paketen
Anzeige