CSS @font-face-Regel

Die CSS-Regel @font-face ermöglicht es, eine benutzerdefinierte Schriftart aus einer selbst gehosteten Datei (oder einem Webdienst) zu laden und überall im Stylesheet zu verwenden. Damit sind Sie nicht mehr auf die wenigen „websicheren" Schriftarten beschränkt, die zufällig auf dem Rechner jedes Besuchers installiert sind.

Diese Seite behandelt die Schriftformate, die Sie ausliefern können, das Schreiben einer robusten @font-face-Deklaration mit Fallbacks, die Eigenschaft font-display zur Steuerung des Ladeverhaltens, die verfügbaren Schrift-Deskriptoren sowie die Alternative, einen gehosteten Dienst wie Google Fonts zu nutzen.

Wie @font-face funktioniert

Eine @font-face-Regel hat zwei Aufgaben:

Sie definiert einen Namen für die Schriftart mit dem Deskriptor font-family (zum Beispiel myFirstFont).
Sie verweist mit dem Deskriptor src auf eine oder mehrere Schriftdateien.

Nach der Deklaration verwenden Sie die Schriftart unter diesem Namen in jeder normalen font-family-Regel, genauso wie eine Systemschrift:

@font-face {
  font-family: 'myFirstFont';
  src: url('myfirstfont.woff2') format('woff2');
}

p {
  font-family: 'myFirstFont', sans-serif;
}

Beenden Sie den font-family-Stack immer mit einem generischen Fallback (z. B. sans-serif), damit der Text noch lesbar ist, falls die Schriftdatei nicht geladen werden kann.

Schriftformate

Browser unterstützen mehrere Schriftdatei-Formate: ttf, otf, eot, svg, svgz, woff und woff2. Für das moderne Web benötigen Sie nur WOFF2 (mit WOFF als Fallback für ältere Browser); der Rest ist veraltet.

OTF-TTF

WOFF wurde als komprimierte, weboptimierte Alternative zu OpenType- und TrueType-Schriften entwickelt, um Dateigröße und Ladezeit zu reduzieren. Allerdings interessieren OpenType-Funktionen viele Designer (z. B. Ligaturen).

EOT

Das Embedded Open Type-Format, vor über 15 Jahren von Microsoft (den ursprünglichen Pionieren von @font-face) entwickelt, ist das einzige Format, das IE8 und früher bei der Verwendung von @font-face erkennen.

SVG/SVGZ

Scalable Vector Graphics (Font) ist ein vektorbasiertes Schriftformat. SVG-Schriften wurden jedoch verworfen und aus allen modernen Browsern entfernt. Für neue Projekte wird es nicht mehr empfohlen. SVGZ ist die komprimierte Version von SVG.

WOFF/WOFF2

Das Web Open Font Format wurde für den Einsatz im Web entwickelt und von Mozilla zusammen mit anderen Organisationen geschaffen. WOFF-Schriften laden häufig schneller als andere Formate, da sie eine komprimierte Version der Struktur von OpenType- (OTF) und TrueType- (TTF) Schriften verwenden. WOFF2 ist die nächste Generation von WOFF und bietet eine bessere Komprimierung.

Bei der Verwendung benutzerdefinierter Schriften sollten folgende Punkte berücksichtigt werden:

Die Dateigröße. Es wird empfohlen, Optionen mit kleineren Varianten zu verwenden.
Die Zeichensatzbeschränkungen. Sie können Schriftsätze einschränken, sodass nur die tatsächlich genutzten Schriften geladen werden.
Systemschriften für kleine Bildschirme. Eine Möglichkeit besteht darin, benutzerdefinierte Schriften nur für größere Bildschirme mit @media zu laden.

Syntax

Syntax der CSS @font-face-Regel

@font-face {
  font-properties
}

Beispiel der @font-face-Regel:

Beispiel der CSS @font-face-Regel mit EOT-, TTF-, SVG-, WOFF- und WOFF2-Formaten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Probier es selbst »

Ladeverhalten mit font-display steuern

Während eine Web-Schriftart heruntergeladen wird, muss der Browser entscheiden, was er anzeigt. Der Deskriptor font-display steuert diesen Kompromiss zwischen einem Aufflackern unsichtbaren Textes (FOIT) und einem Aufflackern ungestalteten Textes (FOUT):

auto — das Standardverhalten des Browsers (normalerweise ähnlich wie block).
block — Text kurz ausblenden (bis zu ~3 s), dann die Web-Schriftart anzeigen. Verursacht FOIT.
swap — sofort Fallback-Text anzeigen und zur Web-Schriftart wechseln, sobald sie geladen ist. Für Fließtext ideal, da der Inhalt nie unsichtbar ist.
fallback — kurze Blockierungsphase, dann Fallback; die Web-Schriftart wird nur eingetauscht, wenn sie schnell eintrifft.
optional — wie fallback, aber der Browser kann die Web-Schriftart bei langsamen Verbindungen ganz überspringen.

swap ist die häufigste Wahl und wird in allen nachfolgenden Beispielen verwendet.

Browser-Unterstützung

Tiefste mögliche Browser-Unterstützung

Dies ist die Methode mit der umfangreichsten Unterstützung. Vor allen anderen Stilen sollte die @font-face-Regel zum Stylesheet hinzugefügt werden.

@font-face-Regel

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

Anschließend wird sie verwendet, um Elemente wie folgt zu gestalten:

CSS @font-face-Regel

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Praktische Browser-Unterstützung

Da WOFF und WOFF2 weit verbreitet sind, kann Folgendes verwendet werden:

CSS @font-face-Regel

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  font-display: swap;
}

Fortschrittliche Browser-Unterstützung

Wenn mit WOFF gearbeitet wird, kann davon ausgegangen werden, dass WOFF2 irgendwann einsetzbar ist:

CSS @font-face-Regel

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Alternative Techniken

In manchen Situationen ist es besser, eine gehostete Schriftart zu verwenden. Dies wird von Google Fonts als Möglichkeit angeboten, deren Schriften zu nutzen. Im folgenden Code wird @import verwendet, um eine Schriftart von Google Fonts zu laden:

CSS @font-face-Regel

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Anschließend kann sie zur Gestaltung von Elementen verwendet werden:

CSS @font-face-Regel

body {
  font-family: 'Open Sans', sans-serif;
}

Ein gehosteter Dienst kann Vorteile bieten. Er enthält wahrscheinlich alle Varianten der Schriftdatei und bietet so eine umfangreiche browserübergreifende Kompatibilität, ohne dass wir die Dateien selbst hosten müssen.

CSS @font-face-Regel

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

Ebenso kann ein Stylesheet im <head> des HTML-Dokuments auf denselben Dienst verlinkt werden, anstatt dies im CSS zu tun.

HTML

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Anschließend können die Elemente wie bei den anderen Methoden gestaltet werden:

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

Auch hier werden die @font-face-Regeln importiert, aber dem HTML-<head> hinzugefügt:

CSS

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Beispiel der @font-face-Regel mit Google Fonts:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Probier es selbst »

Werte

Schrift-Deskriptor	Werte	Beschreibung
font-family	name	Definiert den Namen der Schriftart und ist ein Pflichtfeld.
src	URL	Definiert die URL, von der die Schriftart heruntergeladen wird, und ist ein Pflichtfeld.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Definiert, wie die Schriftart gestreckt wird. Der Standardwert ist normal und es ist optional.
font-style	normal italic oblique	Definiert den Stil der Schriftart. Der Standardwert ist normal und es ist optional.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Definiert die Stärke der Schriftart. Der Standardwert ist normal und es ist optional.
unicode-range	unicode-range	Definiert den Bereich der Unicode-Zeichen, den die Schriftart unterstützt. Der Standardwert ist U+0-10FFFF und es ist optional.

local() in src verwenden

Innerhalb von src können Sie local('Font Name') vor den url()-Einträgen angeben. Der Browser verwendet eine passende, bereits auf dem Gerät des Nutzers installierte Schriftart und lädt die Datei nur herunter, wenn keine gefunden wird – das spart Bandbreite:

@font-face {
  font-family: 'MyWebFont';
  src: local('My Web Font'),
       url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

Übungen

Übung

Was ist der Zweck der @font-face-Regel in CSS?

Eine benutzerdefinierte Schriftart in einer Webseite einzubindenDie Hintergrundfarbe einer Website zu ändernEin externes Stylesheet in ein HTML-Dokument einzufügenEine Schriftart in eine Webseite einzubettenDas Layout einer Webseite zu steuern

Wie @font-face funktioniert

Schriftformate

OTF-TTF

EOT

SVG/SVGZ

WOFF/WOFF2

Syntax

Beispiel der @font-face-Regel:

Ladeverhalten mit font-display steuern

Browser-Unterstützung

Tiefste mögliche Browser-Unterstützung

Praktische Browser-Unterstützung

Fortschrittliche Browser-Unterstützung

Alternative Techniken

Beispiel der @font-face-Regel mit Google Fonts:

Werte

local() in src verwenden

Verwandte Kapitel

Übungen