@font-face

Zuletzt aktualisiert am 15. Februar 2026

@font-face registriert eine eigene Schriftart, die du dann mit font-family verwenden kannst. Die At-Rule definiert den Namen der Schrift, die Quelle (URL oder lokale Datei) und optionale Eigenschaften wie Gewicht und Stil. Mit dem Descriptor font-display steuerst du, wie der Browser Text anzeigt, während die Schrift noch lädt. Das Format woff2 ist heute der Standard: Es bietet die beste Kompression und wird von allen modernen Browsern unterstützt. Richtig eingesetzt, ermöglicht @font-face die volle Kontrolle über die Typografie deiner Website.

Grundlagen

@font-face ist keine reguläre CSS-Eigenschaft, sondern eine At-Rule: eine spezielle Anweisung, die eine Schriftart beim Browser registriert. Die Mindest-Angaben sind font-family (der Name, unter dem du die Schrift verwendest) und src (wo die Schriftdatei liegt). Der Browser lädt die Schrift erst, wenn sie tatsächlich auf der Seite verwendet wird, nicht schon beim Einlesen der @font-face-Regel.

Der src-Descriptor unterstützt url() für externe Dateien und local() für lokal installierte Schriften. Du kannst mehrere Quellen angeben, getrennt durch Komma: Der Browser nimmt die erste, die funktioniert. Mit format() gibst du an, welches Format die Datei hat, damit der Browser Formate überspringen kann, die er nicht unterstützt. Für moderne Browser reicht woff2 allein aus; woff als Fallback ist nur für sehr alte Browser nötig.

font-display ist der wichtigste Performance-Descriptor. Er steuert, was passiert, während die Schrift lädt: Text unsichtbar machen (FOIT, Flash of Invisible Text), sofort einen Fallback zeigen und bei Laden tauschen (FOUT, Flash of Unstyled Text), oder die Schrift optional nur verwenden wenn sie schnell genug da ist. Für die meisten Websites ist font-display: swap oder font-display: fallback die beste Wahl.

Syntax & Werte

font-display Werte

Beispiele

Grundlegende @font-face Deklaration

Eine einfache @font-face-Regel mit woff2-Format und einem Fallback auf woff. Der font-display: swap sorgt dafür, dass Text sofort sichtbar ist.

@font-face {
  font-family: "MeineSchrift";
  src:
    url("/fonts/meineschrift.woff2") format("woff2"),
    url("/fonts/meineschrift.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Verwendung */
body {
  font-family: "MeineSchrift", sans-serif;
}

<div class="face-demo">
Dieser Text verwendet die registrierte Schrift "MeineSchrift" (hier als Demo mit Arial als local-Quelle). In der Praxis würdest du eine woff2-Datei als src angeben.
</div>

Mehrere Gewichte laden

Für jedes Gewicht erstellst du eine separate @font-face-Regel mit demselben font-family-Namen. Der Browser wählt automatisch den passenden Schnitt basierend auf der font-weight-Angabe.

/* Regular (400) */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Der Browser wählt automatisch den richtigen Schnitt */
body { font-family: "Inter", sans-serif; }
h1   { font-weight: 700; } /* → inter-bold.woff2 */
p    { font-weight: 400; } /* → inter-regular.woff2 */

<div class="multi-demo">
<div class="mw-400"><div class="label">font-weight: 400 → Regular-Schnitt</div>Normaler Text in Regular</div>
<div class="mw-700"><div class="label">font-weight: 700 → Bold-Schnitt</div>Fetter Text mit echtem Bold-Schnitt</div>
</div>

font-display Strategien im Vergleich

Die Wahl von font-display beeinflusst, wie der Nutzer die Seite beim ersten Laden erlebt. Jede Strategie hat einen anderen Kompromiss zwischen Performance und visuellem Ergebnis.

/* Empfohlen: Text sofort sichtbar, Font wird getauscht */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}

/* Guter Kompromiss: Minimiert Layout Shift */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: fallback;
}

/* Beste Performance: Font nur aus Cache */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: optional;
}

<div class="display-demo">
<div class="d-swap">
  <div class="name">swap: Empfohlen für die meisten Websites</div>
  <div class="desc">Text sofort mit Fallback-Schrift sichtbar. Web-Font wird bei Laden eingetauscht. Nutzer sieht kurz die Fallback-Schrift (FOUT).</div>
</div>
<div class="d-fallback">
  <div class="name">fallback: Guter Kompromiss</div>
  <div class="desc">100ms unsichtbar, dann Fallback. Web-Font wird nur eingetauscht, wenn sie innerhalb von ca. 3 Sekunden lädt. Minimiert Layout Shifts.</div>
</div>
<div class="d-optional">
  <div class="name">optional: Beste Performance</div>
  <div class="desc">Web-Font nur verwenden, wenn sie sofort verfügbar ist (z.B. aus Cache). Beim ersten Besuch wird die Fallback-Schrift verwendet. Kein Layout Shift.</div>
</div>
<div class="d-block">
  <div class="name">block: Nicht empfohlen</div>
  <div class="desc">Text bis zu 3 Sekunden unsichtbar (FOIT). Schlecht für Barrierefreiheit und Performance.</div>
</div>
</div>

Variable Font laden

Variable Fonts bündeln alle Gewichte in einer einzigen Datei. Statt mehrere @font-face-Regeln für 400 und 700 zu definieren, lädst du eine Datei und gibst den Gewichtsbereich an.

/* Eine Datei für alle Gewichte */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900; /* Gewichtsbereich */
  font-style: normal;
  font-display: swap;
}

/* Jetzt können beliebige Gewichte verwendet werden */
.thin   { font-weight: 100; }
.light  { font-weight: 300; }
.custom { font-weight: 450; } /* Stufenlos! */
.bold   { font-weight: 700; }
.black  { font-weight: 900; }

<div class="var-demo">
<div class="vw-100">Variable Font: Thin <span class="num">100</span></div>
<div class="vw-300">Variable Font: Light <span class="num">300</span></div>
<div class="vw-450">Variable Font: Zwischen-Gewicht <span class="num">450</span></div>
<div class="vw-600">Variable Font: Semi Bold <span class="num">600</span></div>
<div class="vw-900">Variable Font: Black <span class="num">900</span></div>
</div>

Barrierefreiheit

Verwende font-display: swap oder font-display: fallback, damit Text immer lesbar ist, während die Schrift lädt. font-display: block macht Text bis zu 3 Sekunden unsichtbar. Das ist ein Barrierefreiheitsproblem, weil Nutzer nichts lesen können. Screenreader lesen den Text zwar trotzdem vor, aber sehende Nutzer mit langsamen Verbindungen sehen eine leere Seite.

Wähle eine Fallback-Schrift, die der Web-Font in Größe und Laufweite ähnelt. Ein großer Unterschied zwischen Fallback und Web-Font verursacht Layout Shifts beim Austausch, was für Nutzer mit vestibulären Störungen oder Konzentrationsschwierigkeiten problematisch sein kann. Die CSS-Eigenschaft size-adjust in @font-face kann helfen, die Metriken der Fallback-Schrift an die Web-Font anzugleichen.

Lade nicht zu viele Schriften und Schnitte. Jede Schriftdatei ist eine HTTP-Anfrage, die die Ladezeit erhöht. Auf langsamen Verbindungen oder älteren Geräten kann das zu spürbaren Verzögerungen führen. Für die meisten Websites reichen 2-3 Schriftschnitte (Regular, Bold, eventuell Italic).

Häufige Fehler

• Nur woff laden statt woff2: woff2 bietet ca. 30% bessere Kompression als woff. Alle modernen Browser unterstützen woff2, ein woff-Fallback ist nur noch für sehr alte Browser nötig.
• font-display vergessen: Ohne explizites font-display gilt auto, was in den meisten Browsern wie block funktioniert: Text ist unsichtbar, bis die Schrift geladen ist. Setze immer font-display: swap oder fallback.
• Zu viele Schriftschnitte laden: Jeder Schnitt (Regular, Bold, Italic, Bold Italic, Light, Medium…) ist eine separate HTTP-Anfrage. Lade nur die Gewichte, die du tatsächlich verwendest. Zwei oder drei Schnitte reichen für die meisten Websites.
• local() falsch verwenden: local("Inter") sucht nach einer lokal installierten Schrift mit exakt diesem Namen. Der Name muss dem PostScript-Namen oder dem Full-Name der Schrift entsprechen, nicht dem Dateinamen.
• Variable Font laden und trotzdem einzelne Gewichte definieren: Wenn du einen Variable Font mit font-weight: 100 900 lädst, brauchst du keine separaten @font-face-Regeln für einzelne Gewichte. Die Range-Deklaration deckt alles ab.
• font-family-Name in @font-face anders schreiben als in der Nutzung: @font-face { font-family: "Inter"; } und body { font-family: "inter"; } funktioniert, weil CSS case-insensitive ist. Aber "Inter" und "Inter Regular" sind verschiedene Namen. Halte den Namen konsistent.

Browser-Kompatibilität

@font-face wird von allen Browsern vollständig unterstützt. woff2 wird seit 2015/2016 von allen modernen Browsern unterstützt. font-display wird seit 2018 von allen modernen Browsern unterstützt. Variable Fonts werden seit 2018 breit unterstützt.

Email-Kompatibilität

@font-face wird in HTML-Emails nur von wenigen Clients unterstützt. Die meisten Clients ignorieren Web-Fonts komplett und verwenden ihre Standard-Schriften.

Verwandte Eigenschaften