@font-face

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Some parts of this feature may have varying levels of support.

Die @font-face CSS At-Regel definiert eine benutzerdefinierte Schriftart, mit der Text dargestellt wird. Die Schriftart kann entweder von einem Remote-Server oder von einer lokal auf dem Computer des Benutzers installierten Schriftart geladen werden.

Syntax

css
@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}

Deskriptoren

ascent-override

Definiert die Ascent-Metrik für die Schriftart.

descent-override

Definiert die Descent-Metrik für die Schriftart.

font-display

Legt fest, wie eine Schriftart basierend darauf angezeigt wird, ob und wann sie heruntergeladen und einsatzbereit ist.

font-family

Gibt einen Namen an, der als Wert für die Schriftpropperties verwendet wird. Ein font-family-Name ist erforderlich, damit die @font-face-Regel gültig ist.

font-stretch

Ein font-stretch-Wert. Akzeptiert zwei Werte, um einen Bereich zu spezifizieren, der von einer Schriftart unterstützt wird, z. B. font-stretch: 50% 200%;.

font-style

Ein font-style-Wert. Akzeptiert zwei Werte, um einen Bereich zu spezifizieren, der von einer Schriftart unterstützt wird, z. B. font-style: oblique 20deg 50deg;.

font-weight

Ein font-weight-Wert. Akzeptiert zwei Werte, um einen Bereich zu spezifizieren, der von einer Schriftart unterstützt wird, z. B. font-weight: 100 400;.

font-feature-settings

Ermöglicht die Steuerung über erweiterte typografische Funktionen in OpenType-Schriftarten.

font-variation-settings

Ermöglicht die Low-Level-Steuerung von OpenType- oder TrueType-Schriftvariationen durch Angabe der vierstelligen Achsennamen und ihrer entsprechenden Variationswerte.

line-gap-override

Definiert die Line-Gap-Metrik für die Schriftart.

size-adjust

Definiert einen Multiplikator für Glyphen-Umrisse und Metriken, die mit dieser Schriftart verbunden sind. Dies erleichtert die Harmonisierung der Designs verschiedener Schriftarten bei derselben Schriftgröße.

src

Gibt Verweise auf Schriftressourcen an, einschließlich Hinweise auf das Schriftformat und die Technologie. Eine src ist erforderlich, damit die @font-face-Regel gültig ist.

unicode-range

Der Bereich von Unicode-Codepunkten, die von der Schriftart verwendet werden sollen.

Beschreibung

Es ist üblich, sowohl url() als auch local() zusammen zu verwenden, sodass die lokal installierte Kopie der Schriftart des Benutzers verwendet wird, falls diese verfügbar ist, und andernfalls eine Kopie der Schriftart heruntergeladen wird.

Wenn die local()-Funktion bereitgestellt wird, die einen Schriftnamen angibt, der auf dem Gerät des Benutzers gesucht wird, und der User Agent eine Übereinstimmung findet, wird diese lokale Schriftart verwendet. Andernfalls wird die mit der url()-Funktion angegebene Schriftressource heruntergeladen und verwendet.

Browser versuchen, Ressourcen in der Reihenfolge ihrer Listendeklaration zu laden. Daher sollte local() normalerweise vor url() geschrieben werden. Beide Funktionen sind optional, sodass ein Regelblock, der nur eine oder mehrere local()-Angaben ohne url() enthält, möglich ist. Wenn spezifischere Schriftarten mit format() oder tech()-Werten gewünscht sind, sollten diese vor Versionen aufgelistet werden, die diese Werte nicht enthalten, da andernfalls die weniger spezifische Variante zuerst getestet und verwendet würde.

Durch die Möglichkeit, eigene Schriftarten bereitzustellen, ermöglicht @font-face die Gestaltung von Inhalten, ohne auf die sogenannten "web-sicheren" Schriftarten beschränkt zu sein (d. h. die Schriftarten, die so häufig sind, dass sie als universell verfügbar gelten). Die Möglichkeit, den Namen einer lokal installierten Schriftart anzugeben, die verwendet werden soll, bietet die Möglichkeit, die Schriftart über die Grundlagen hinaus anzupassen, ohne dabei auf eine Internetverbindung angewiesen zu sein.

Hinweis: Strategien zum Laden von Schriftarten in älteren Browsern werden auf der Seite zum src-Deskriptor beschrieben.

Die At-Regel @font-face kann nicht nur auf oberster Ebene von CSS, sondern auch innerhalb jeder CSS Bedingungsgruppen-At-Regel verwendet werden.

MIME-Typen für Schriftarten

Format MIME-Typ
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

Hinweise

  • Web-Schriftarten unterliegen denselben Domain-Beschränkungen (Schriftdateien müssen sich auf derselben Domain wie die Seite befinden, die sie verwendet), es sei denn, HTTP-Zugriffskontrollen werden verwendet, um diese Einschränkung zu lockern.

  • @font-face kann nicht innerhalb eines CSS-Selektors deklariert werden. Zum Beispiel funktioniert Folgendes nicht:

    css
    .className {
      @font-face {
        font-family: "MyHelvetica";
        src:
          local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
          url("MgOpenModernaBold.ttf");
        font-weight: bold;
      }
    }
    

Formale Syntax

@font-face = 
@font-face { <declaration-list> }

Beispiele

Spezifikation einer herunterladbaren Schriftart

Dieses Beispiel spezifiziert eine herunterladbare Schriftart zur Verwendung und wendet sie auf den gesamten Körper des Dokuments an:

html
<body>
  This is Bitstream Vera Serif Bold.
</body>
css
@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
}

Spezifikation lokaler Schriftersatzoptionen

In diesem Beispiel wird die lokale Kopie des Benutzers von "Helvetica Neue Bold" verwendet. Wenn der Benutzer diese Schriftart nicht installiert hat (sowohl der vollständige Schriftname als auch der Postscript-Name werden versucht), wird stattdessen die herunterladbare Schriftart namens "MgOpenModernaBold.ttf" verwendet:

css
@font-face {
  font-family: "MyHelvetica";
  src:
    local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-face-rule

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@font-face
OpenType CBDT and CBLC rendering
OpenType COLRv0 rendering
OpenType COLRv1 rendering
OpenType SBIX rendering
OpenType SVG rendering
SVG fonts
DeprecatedNon-standard
WOFF
WOFF 2
ascent-override
descent-override
font-display
font-family
font-feature-settings
font-stretch
font-style
font-variant
Non-standard
font-variation-settings
font-weight
line-gap-override
size-adjust
src
Drop invalid item (not src string)
format(keyword)
format('*-variations')
Non-standard
tech(keyword)
unicode-range

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch