Webfonts *richtig* verwenden

Da fragt sich jetzt der ein oder andere Webentwickler „Was kann man da falsch machen? Man bindet den (new) Bulletproof @font-face Syntax ein und gut ist“. Problem hierbei wie immer unser geliebte OldIE, der Webfonts zwar schon im zarten Alter von Version 5.5 beherrschte, aber immer noch einen „alten“ Syntax braucht.

Das Problem: faux-bold

faux bold text
Fehldarstellung – der Browser interpoliert die Schriftfetten

Das Problem ist nicht neu, 2012 schrieb Alan Stearns bei A List Apart den Artikel „Say No to Faux Bold“ und erst kürzlich Gerrit van Aaken im Artikel „Webfonts: Fette Fehlerquelle“.

Abhilfe soll die Eigenschaft ‚font-synthesis‚ schaffen:

.say-no-to-faux-bold {
  font-synthesis: none;
}

leider wird die Eigenschaft von keinem Browser unterstützt :(

@font-face Einbindung für moderne Browser

Um die Fehldarstellungen zu vermeiden, bindet man den Font wie folgt ein:

@font-face {
  font-family: Fontname; /* regular font */
  src: url("Fontname-Regular.woff") format("woff");
  font-weight: normal; font-style: normal; }

@font-face {
  font-family: Fontname; /* bold font */
  src: url("Fontname-Bold.woff") format("woff");
  font-weight: bold; font-style: normal; }

@font-face {
  font-family: Fontname; /* light font */
  src: url("Fontname-Light.woff") format("woff");
  font-weight: 300; font-style: normal; }

@font-face {
  font-family: Fontname; /* italic font */
  src: url("Fontname-Italic.woff") format("woff");
  font-weight: normal; font-style: italic; }

@font-face {
  font-family: Fontname; /* bolditalic font */
  src: url("Fontname-BoldItalic.woff") format("woff");
  font-weight: bold; font-style: italic; }

für Android zusätzlich TTF/OTF einbinden

@font-face {
  font-family: Fontname; /* regular font */
  src: url("path/Fontname-Regular.ttf") format("ttf"),
       url("path/Fontname-Regular.woff") format("woff");
  font-weight: normal;
  font-style:  normal; }

Zuweisung in Überschrift:

h1 {
  font-family: Fontname, sans-serif;
}

@font-face für Old-IE (IE8)

Für die älteren Internet Explorer, die das WOFF-Format nicht unterstützen, kann man die Schrift im EOT-Format einbinden. Hier denke ich auch immer an die Performance und an das Rendering der Schriften und empfehle meist, für die Browser keine Webfonts zu verwenden. Zudem sollte man die Zugriffsstatistik für die Versionen prüfen, bevor man sich die Mühe macht. Zugegeben bisher wollten noch nicht sehr viele Kunden der Empfehlung, die Schriften für IE8 weg zu lassen, folgen. ;)

Für IE8 muss die Schriften wie folgt eingebunden werden:

/* ie-specific.css */
@font-face {
  font-family: Fontname-regular; /* regular IE font */
  src: url("Fontname-Regular.eot"); }

@font-face { /* bold IE font */
  font-family: Fontname-bold;
  src: url("Fontname-Bold.eot"); }

@font-face { /* italic IE font */
  font-family: Fontname-italic;
  src: url("Fontname-Italic.eot"); }

@font-face { /* bold italic IE font */
  font-family: Fontname-bolditalic;
  src: url("Fontname-BoldItalic.eot"); }

über Conditional Comments in die Seite einbinden

<!--[if lt IE 9]>
  <link rel="stylesheet" href="ie-specific.css" media="screen" />
<![endif]-->

Font-Loading Performance

Text der mit Webfonts ausgezeichnet ist, wird in einigen Browsern solange nicht angezeigt, bis die Schrift heruntergeladen ist, um den „FOUT“ (flash of unstyled text) zu vermeiden. Besonders nachteilig ist dieses Verhalten in mobilen Browsern, z.B. Mobile Safari (iOS), da das Laden im Mobilnetz häufig langsamer ist (Stichwort Latenz). Hier wartet man oftmals lange bis man endlich den Text lesen kann. Besonders ärgerlich ist das meiner Meinung nach bei Schriften, die nicht großartig anders aussehen als vorhandene Systemschriften. (Typonazis werden mich jetzt steinigen)

font-loading-ala
Webfont Loading Performance (FOUT)

Randnotiz: Moderne Browser laden Schriften erst, wenn sie im CSS zugewiesen sind. Bedeutet also man könnte mehrere Schriften über @font-face verknüpfen, das Laden der Schrift erfolgt erst, wenn im CSS die Zuweisung über font-family geschieht.

In Firefox für Android kann man Webfonts über about:config deaktivieren (geht auch beim Desktop Firefox)

gfx.downloadable_fonts.enabled = false

Auch die Zeit, wann ein Fallback-Font geladen wird, kann eingestellt werden, der Defaultwert ist aktuell 3000ms für die Anzeige des Fallback-Font.

gfx.downloadable_fonts.fallback_delay = 1000
fallback-delay auf 1sek kürzen.

Paul Irish hat für Chrome (Blink) letztens eine Umfrage unter den Entwicklern gestartet, wie das Browserverhalten beim Laden von Schriften sein sollte. Ilya Grigorik beschreibt auf Google+ wie die Ladeperformance in Chrome verbessert wurde und sich Chrome in Zukunft wie Firefox verhält.

Fonts base64 decodieren

Fonts sollten nicht mit base64 codiert in CSS eingebunden werden, da das das Stylesheet unnötig aufbläst und somit das Rendering der Seite verzögert.

Webfontloader – Webfonts asynchron laden

Webfontloader ist ein Open-Source-Script von Typekit, mit dem man die Schriften von Typekit, Google, Fontdeck, Fonts.com und weiteren Foundries asynchron laden kann. Zu dem kann man auch selbst gehostete Fonts über den Webfontloader laden.

Einbindung des Webfontloader

<script>
WebFontConfig = {
  typekit: { id: 'xxxxxx' }
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
</script>

Font-Events

Bindet man das Script ein, stellt Webfontloader beim Aufruf Klassen für die erfolgten Font-Events bereit. Das Script meldet also, was der aktuelle Zustand des Ladevorgangs ist. Die Klassen werden wie bei Modernizr zum
<html> Class-Attribut hinzugefügt.

Klassen, die Webfontloader hinzufügt:

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

Verwendung im CSS:

h1, h2, h3 {
  font-family: sans-serif;
}

.wf-active h1, .wf-active h2, .wf-active h3 {
  font-family: "webfont", sans-serif;
}

Beispiel: Einbindung der „Source Sans Pro“ mit Webfontloader über GoogleFonts.com:

//= require webfonts.js

WebFont.load({
    google: { families: [ 'Source+Sans+Pro:400,300,600:latin' ] }
    // load Source Sans Pro: light, normal, bold, light italic, normal italic, bold italic : latin subset
    // google: { families: [ 'Source+Sans+Pro:400,300,700,700italic,400italic,300italic:latin' ] }
});

Wie sich vielleicht erahnen lässt, kann man in der Konfiguration mehrere Schriftschnitte, die man laden möchte, definieren.

  • 400 == normal
  • 700 == bold
  • 300 == light
  • 400italic == normal kursiv
  • 500 == medium

Mit dem Zusatz :latin kann man den Zeichenumfang steuern, hier wären es alle lateinischen Schriftzeichen. Welche Schriftzeichen wirklich vorhanden sind, sollte man genau prüfen manchmal fehlen Schriftzeichen (skandinavische).

native HTML5 Font-Events

… gibt es noch nicht, sind aber bereits in einer ersten Version spezifiziert. Dafür gibt es aber bereits einen Polyfill: Polyfill für native Font-Events

lokale System-Fonts bevorzugen

Nicht immer muss ein Webfont geladen werden, in Mac OSX ist z.B. seit Mavericks ‚PT Sans‘ im System verfügbar, den Font extra zu laden wäre unnötig. Mit dem Keyword ‚local‘ werden Systemfonts bevorzugt.

@font-face {
  font-family: 'PT Sans';
  src: local('PT Sans'), local('PTSans-Regular'), url('fonts/ptsans-regular.woff') format('woff'),
       local('PT Sans'), local('PTSans-Regular'), url('fonts/ptsans-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Auch die in iOS7 hinzugekommene ‚Helvetica Neue Condensed Bold‘ kann über den Post-Script Namen verwendet werden.

@font-face { 
  font-family: Helvetica; 
  font-weight: bold; 
  src: local(HelveticaNeue-CondensedBold); 
}

Fallback-Font auf mobilen Geräten

Wenn man responsive Webseiten erstellt, sollte man sich bewusst sein, dass nicht alle Schriften, die verwendet werden sollen, auch auf dem Endgerät vorhanden ist. Android hat nur wenige Schriften vorinstalliert. Jordan Moore hat eine Übersichttabelle der Systemfonts auf mobilen Systemen bereit gestellt. Allerdings fehlt dort noch ein iOS7 Update. ;)

fallback-fonts2

fallback-fonts2

Auf Android sind weder Arial, noch Helvetica oder Times installiert, die Standard-Schrift ist Droid (Sans/Serif). Man sollte meinen, wenn man font-family: 'Times New Roman', Times, serif; angibt, dass Android dann auf den Serif Font zurück fällt. Anscheinend kann das Android ganz schön verwirren und führt zu Fehldarstellungen.

fallback-fonts4
Samsung GT-I9300 (Android 4.1.2)
fallback-fonts3
Samsung GT-S5830 (Android 2.3.3)

Als Fix, damit alle getesteten Androids den Fallback-Font anzeigen, musste ‚Droid Serif‘ explizit angegeben werden. (HT @closingtag)

font-family: 'Serif Webfont', 'Droid serif', 'Times New Roman', Times, serif;

Wer noch Ergänzungen hat, bitte einfach kommentieren.

Flattr this!

5 Gedanken zu „Webfonts *richtig* verwenden“

  1. Schöner Artikel, vielen Dank dafür.
    Was allerdings oftmals untergeht in solchen Artikeln untergeht, sind die gelieferten CSS oder JS-Codes der Webfont-Anbieter. Diese fördern ja meist die Verwendung von falschen Fetten durch einzelne Fontnamen für jeden Schnitt.
    Gibt es da einen Tipp wie man damit umgehen sollte? Die Webfonts dann wieder manuell einzubinden kann ja nicht Ziel der Sache sein.

  2. Hallo Felix,
    soweit ich das sehe, hat selbst GoogleFonts die Einbindung umgestellt. Von Typekit oder Fonts.com bekommt man ähnliche Anleitungen. Grundsätzlich würde ich die Einbindung via Webfontloader verschlagen. Von Typekit bekommt man ja auch nur einen <link>.
    LG, Sven

  3. Hallo Sven,
    stimmt, bei Google wurde umgestellt.
    Aber über unseren fonts.com-Account bekomme ich nur die Option JS, CSS oder Selfhosting. Und der generierte Code fördert falsche Fetten. Es gibt sicherlich viele, die diese Methode nicht in Frage stellen und einfach drauflos arbeiten.
    Den Webfontloader werden wir uns nun mal näher ansehen.
    LG Felix

  4. Hallo Sven,

    vielen Dank für den sehr gut recherchierten und ausführlichen Artikel. Gerade der Teil der base64 Enkodierung kann bei Projekten mit mehreren Schriftschnitten eine deutliche Verbesserung in Sachen Performance und Overhead bedeuten.

    Als Ergänzung vielleicht folgender Artikel der sich mit der Enkodierung/Komprimierung befasst: „Bündelung mehrerer WOFF-Dateien in GZIP-komprimiertem CSS

  5. Hallo Lethian,
    danke für die gute Ergänzung, ist ein guter Tipp. Bei 3 unterschiedlichen Schriften würde ich aber fast schon zu Webfontloader tendieren, müsste man mal austesten und vergleichen.

Kommentare sind geschlossen.