@font-face: Webfonts einbinden – font-family, src, font-display und variable Schriften

Die @font-face-Regel: font-family und src

@font-face deklariert eine Schrift: font-family vergibt den Namen, unter dem sie im Stylesheet verwendet wird, src nennt die Datei. font-weight und font-style sagen, für welchen Schnitt die Datei steht; für jeden weiteren Schnitt kommt eine eigene Regel. Erst eine normale Regel mit font-family: "Name" bringt die Schrift auf ein Element.

@font-face {
  font-family: "Piazzolla";
  src: url(/fonts/piazzolla.woff2) format("woff2");
  font-weight: 300 900;       /* variable Schrift: ein Bereich */
  font-display: swap;
}
html { font-family: "Piazzolla", Georgia, serif; }

Formate: woff2 genügt

WOFF2 ist das komprimierte Webformat und wird von jedem Browser seit 2016 verstanden; weitere Formate in src sind nur noch für sehr alte Browser nötig. Eine Schriftdatei liegt typisch zwischen 20 und 120 KB pro Schnitt; unicode-range teilt große Schriften in Teilmengen, die der Browser nur lädt, wenn ein Zeichen daraus vorkommt.

font-display: was passiert, während die Schrift lädt

Bis die Datei da ist, muss der Browser entscheiden, ob er Text zeigt. font-display: swap zeigt sofort eine Ersatzschrift und tauscht später – der Text ist immer lesbar, springt aber einmal. block versteckt ihn kurz, fallback und optional tauschen nur, wenn die Schrift schnell genug kommt. Für Fließtext ist swap die übliche Wahl; wer das Springen vermeiden will, passt die Ersatzschrift mit size-adjust und ascent-override an oder wählt optional und akzeptiert, dass die Webschrift beim ersten Besuch fehlen kann.

Variable Schriften: ein Schnitt, viele Achsen

Eine variable Schrift enthält alle Schnitte in einer Datei; font-weight: 300 900 in der Regel gibt den Bereich an. Neben Gewicht und Breite kann sie eigene Achsen haben, die über font-variation-settings gesteuert werden. Die Schrift dieser Seite, Recursive, hat eine Achse MONO, die stufenlos zwischen proportional und dicktengleich wechselt, und CASL für einen lockereren Duktus – das Labor oben zeigt beides.

Fette und kursive Schnitte richtig anmelden

Ein häufiger Fehler besteht darin, jedem Schnitt einer Schriftfamilie einen eigenen Namen zu geben und ihn dann im Stylesheet direkt aufzurufen. Richtig ist das Gegenteil: Alle Schnitte werden unter demselben Familiennamen angemeldet und unterscheiden sich durch die Angaben zu Stärke und Stil innerhalb der Regel. Der Browser wählt dann selbst den passenden Schnitt aus, sobald im Stylesheet eine Stärke oder ein kursiver Stil verlangt wird.

Wird ein Schnitt nicht angemeldet, den ein Element verlangt, rechnet der Browser ihn aus: Er neigt die aufrechte Form oder verdickt die Konturen. Das Ergebnis ist erkennbar schlechter als ein echter Schnitt – bei Kursiven besonders, weil eine echte Kursive andere Buchstabenformen hat und nicht nur schräg steht. Ein deutliches Warnzeichen im Prüfwerkzeug ist eine Schrift, die im Fettdruck plötzlich schwammig wirkt. Die Antwort darauf ist nicht, das Fettsetzen zu vermeiden, sondern den fetten Schnitt zu laden und anzumelden.

Nur laden, was gebraucht wird

Eine vollständige Schriftdatei enthält oft Tausende Zeichen für Sprachen, die auf der Seite nicht vorkommen. Der Deskriptor für den Zeichenbereich schränkt eine Regel auf einen Ausschnitt ein, und der Browser lädt die Datei erst, wenn ein Zeichen daraus tatsächlich auf der Seite steht. So lässt sich derselbe Familienname aus mehreren Dateien zusammensetzen – eine für den lateinischen Grundbestand, eine für die erweiterten Zeichen, eine für Griechisch –, und die meisten Leser laden nur die erste.

Der zweite Hebel ist das Verkleinern der Datei selbst: Werkzeuge entfernen nicht benötigte Zeichen und Tabellen und erzeugen daraus eine neue Datei, was den Umfang oft um mehr als die Hälfte senkt. Beides zusammen macht den Unterschied zwischen einer Schrift, die den Seitenaufbau bremst, und einer, die nicht auffällt. Und weil eine Schrift erst geladen wird, wenn eine Regel sie tatsächlich verlangt, kostet eine angemeldete, aber nirgends benutzte Familie nichts außer den paar Zeilen im Stylesheet.

Die Reihenfolge im Quelltext zählt

Findet der Browser mehrere Regeln mit demselben Familiennamen und überschneidenden Angaben, gewinnt die zuletzt notierte. Anders als bei gewöhnlichen Regeln spielt dabei keine Spezifität hinein – es gibt keinen Selektor. Deshalb genügt es, eine Schriftanmeldung weiter unten zu wiederholen, um eine frühere zu ersetzen, und deshalb gehören alle Anmeldungen an eine Stelle im Stylesheet.

Innerhalb einer Regel arbeitet der Browser die Quellenliste dagegen von links nach rechts ab und nimmt das erste Format, das er unterstützt. Die Formatangabe hinter jeder Quelle ist wichtiger, als sie aussieht: Ohne sie muss er die Datei erst laden, um festzustellen, ob er mit ihr etwas anfangen kann.

Selbst hosten statt vom Schriftdienst laden

Ein link zu einem Schriftdienst spart Arbeit, kostet aber eine dritte Domain, eine zusätzliche Verbindung und übermittelt die Adresse jedes Besuchers an den Dienst. Selbst gehostete Dateien liegen auf demselben Server, lassen sich vorladen (rel="preload") und lange cachen. Die Artikel Text dynamisch ersetzen und Fakten zur Bildersetzung dokumentieren, wie viel Aufwand Überschriften in einer besonderen Schrift vor @font-face kosteten.

Häufige Fragen