Webfonts

Lange Zeit war ich skeptisch, was die Verwendung von Webfonts betrifft. Einerseits ist es für einen Autor wünschenswert, für die Veröffentlichung seiner Texte auch bestimmte Schriften verwenden zu können – andererseits nimmt man dem Besucher mit exakten Schriftvorgaben die Möglichkeit, sich die für ihn angenehmste Schrift selber in den Einstellungen seines Browsers festlegen zu können. Auch werden manche Schriften nicht in jeder Umgebung gleich gut lesbar dargestellt.

Mittlerweile habe ich meine Meinung geändert, was man unschwer hier erkennen kann, wenn man meine Website mit einem aktuelleren Browser betrachtet. Die Auswahl einer geeigneten Schrift, die auf unterschiedlichen Plattformen gut lesbar ist, ist aber nach wie vor entscheidend für ein gutes Ergebnis.

Verwendung von Schriften in Web-Browsern

Ursprünglich war in HTML keine Vorgabe von Schriften vorgesehen, da nur die Struktur (Markup) des Dokumentes beschrieben wird, wie Überschriften, Absätze oder Aufzählungen. Mit dem Netscape Navigator wurde dann das font-Element eingeführt, mit dem auch die Schrift für einen Textabschnitt vorgegeben werden konnte – das widersprach aber der Idee von HTML, da nun Struktur und Layout vermischt wurden.

Mit Cascading Stylesheets (CSS) wurde eine Trennung von Struktur und Layout erreicht. CSS definiert das Erscheinungsbild von Elementen in einem HTML-Dokument. Für die Vorgabe von Schriften gibt es das Attribut font-family. Hier kann man sowohl konkrete Angaben machen, wie „Arial“, „Helvetica“ oder „Palatino“ aber auch „generische“ Namen angeben: „sans-serif“ für eine serifenlose Schrift, „serif“ für eine Schrift mit Serifen und „monospace“ für eine Schrift mit Festbreiten. Ist keine der konkret angegebenen Schriften vorhanden, wird eine Alternative anhand der generischen Angabe ausgewählt. Die meisten Browser bieten eine Einstellmöglichkeit an, welche Schrift jeweils für die drei Varianten „serifenlos“, „mit Serifen“ und „Festbreite“ verwendet werden soll.

Beispiel – CSS-Regel für Darstellung von Absätzen mit der Schrift „Arial“ oder wenn nicht vorhanden, einer beliebigen serifenlosen Schrift entsprechend der Einstellung des Browsers:

p { font-family:Arial, sans-serif; }

Einbinden eigener Schriften als Webfonts

Zunächst stellt man die Schrift als Datei in geeigneten Formaten zur Verfügung, z.B. als Embedded OpenType (eot), Web Open Font Format (woff) und TrueType (ttf), womit alle aktuellen Browser abgedeckt sind.

Dann lädt man die Schrift mit @font-face und gibt sie zusätzlich bei font-family an, damit sie verwendet wird, wie im nachfolgenden Beispiel für die Schrift „MyNiceFont“, die in zwei Formaten innerhalb des Verzeichnisses /fonts auf dem Webserver bereitgestellt wird:

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont.eot") format("embedded-opentype"),
         url("/fonts/mynicefont.woff") format("woff"),
         url("/fonts/mynicefont.ttf") format("truetype");
}

p { font-family:MyNiceFont, Arial, sans-serif; }

Zur Erläuterung:

Die Angabe font-family innerhalb der @font-face-Definition legt den Namen der Schrift fest, mit der sie verwendet werden kann. Die src-Angabe gibt die Quelle inklusive Format für die Schriftdatei an. Wie im Beispiel zu sehen, sind auch mehrere Formate möglich. Der Browser nutzt dann automatisch das erste Format, dass er unterstützt. Wird kein unterstütztes Format gefunden oder fehlt die Unterstützung für Webfonts komplett, wird die erste, auf dem Computer vorhandene Alternativschrift der CSS-Regel für die Absatzformatierung verwendet.

Eine derart eingebundene Schrift wird auch für kursive oder fette Texte verwendet, was aber oft kein sehr gutes Ergebnis liefert, da hierfür normalerweise eigene Schriftschnitte benötigt werden. Hat man mehrere Schriftschnitte zur Verfügung, kann man auch diese durch mehrere @font-face-Blöcke definieren, die jeweils einen identischen Namen für die Schrift, aber unterschiedliche Angaben für font-style und font-weight enthalten:

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-regular.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-regular.woff") format("woff"),
         url("/fonts/mynicefont-regular.ttf") format("truetype");
}

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-italic.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-italic.woff") format("woff"),
         url("/fonts/mynicefont-italic.ttf") format("truetype");
    font-style: italic;
}

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-bold.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-bold.woff") format("woff"),
         url("/fonts/mynicefont-bold.ttf") format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: MyNiceFont;
    src: url("/fonts/mynicefont-bold-italic.eot") format("embedded-opentype"),
         url("/fonts/mynicefont-bold-italic.woff") format("woff"),
         url("/fonts/mynicefont-bold-italic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

Rechtliches

Für Schriften gilt grundsätzlich, dass sie, wie Bilder, urheberrechtlich geschützt sind – man sollte daher Schriften, die einem gefallen, nicht einfach von anderen Websites kopieren, wenn die freie Nutzbarkeit nicht explizit angegeben ist. Besser ist es, man sucht sich freie Schriften bei offiziellen Anbietern, wie http://www.fontsquirrel.com/, oder erwirbt eine geeignete Nutzungslizenz.

Update: Einbindung von Webfonts als Data-URL

In diesem Artikel wird eine effizientere Methode der Einbindung von Webfonts als Data-URL beschrieben.

Öffentlichen Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Wenn Du mich persönlich erreichen möchtest, siehe Impressum.