CSS-@font-face-Regel

Die CSS-@font-face-Regel ist eine Regel, mit der Webdesigner Online-Schriftarten definieren können, um Text auf ihrer Website anzuzeigen. Webdesigner müssen also keine „websicheren Schriftarten“ mehr verwenden.

Zuerst müssen wir in der neuen @font-face-Regel einen Namen für die Schriftart festlegen (z. B. myFirstFont) und dann auf die Schriftdatei verweisen.

Jeder Browser hat sein eigenes Format. Wir verwenden die Formate ttf, otf, eot, svg, svgz, woff, woff2.

OTF / TTF

WOFF wurde entwickelt, um eine komprimierte, für das Web optimierte Alternative zu OpenType- und TrueType-Schriftarten bereitzustellen und so die Dateigröße sowie die Ladezeit zu reduzieren. Allerdings können OpenType-Funktionen viele Designer interessieren (z. B. Ligaturen).

EOT

Embedded Open Type ist ein von Microsoft (den ursprünglichen Entwicklern von @font-face) vor über 15 Jahren entwickeltes Format und das einzige Format, das IE8 und ältere Versionen bei der Verwendung von @font-face erkennen.

SVG/SVGZ

Scalable Vector Graphics (Font) ist ein Vektor-Schriftformat. SVG-Schriftarten sind jedoch veraltet und aus allen modernen Browsern entfernt worden. Für neue Projekte wird ihre Verwendung nicht mehr empfohlen. SVGZ ist die gezippte Version von SVG.

WOFF/WOFF2

Web Open Font Format wurde für den Einsatz im Web erstellt und gemeinsam mit anderen Organisationen von Mozilla entwickelt. WOFF-Schriftarten laden oft schneller als andere Formate, da sie eine komprimierte Version der Struktur verwenden, die bei OpenType-(OTF)- und TrueType-(TTF)-Schriftarten genutzt wird. WOFF2 ist die neue Generation von WOFF und bietet eine bessere Komprimierung.

Bei der Verwendung benutzerdefinierter Schriftarten sollten wir die folgenden Aspekte berücksichtigen:

Die Dateigröße. Es wird empfohlen, Optionen mit leichteren Versionen zu verwenden.
Die Einschränkungen des Zeichensatzes. Sie können Schriftarten-Sets so begrenzen, dass nur die verwendeten Schriftarten geladen werden.
Systemschriftarten für kleine Bildschirme. Eine der Lösungen besteht darin, größere Bildschirme anzusprechen, wenn die benutzerdefinierte Schriftart mit @media geladen wird.

Syntax

Syntax der CSS-@font-face-Regel

css

@font-face {
  font-properties
}

Beispiel der @font-face-Regel:

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

html

<!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>

Try it Yourself »

Browser-Unterstützung

Tiefstmögliche Browser-Unterstützung

Dies ist die Methode mit der tiefsten Unterstützung. Vor allen Stilen sollten wir die @font-face-Regel zum Stylesheet hinzufügen.

@font-face-Regel

css

@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;
}

Dann wird sie verwendet, um Elemente auf folgende Weise zu gestalten:

CSS-@font-face-Regel

css

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

Praktisches Niveau der Browser-Unterstützung

Da WOFF und WOFF2 häufig verwendet werden, können wir Folgendes nutzen:

CSS-@font-face-Regel

css

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

Sehr progressive Browser-Unterstützung

Wenn wir mit WOFF arbeiten, kann davon ausgegangen werden, dass WOFF2 irgendwann verwendet werden kann:

CSS-@font-face-Regel

css

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

Alternative Techniken

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

CSS-@font-face-Regel

css

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

Dann kann sie verwendet werden, um Elemente zu gestalten:

CSS-@font-face-Regel

css

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

Ein gehosteter Dienst kann einen Vorteil haben. Er enthält wahrscheinlich alle Varianten der Schriftdatei und bietet dadurch eine hohe browserübergreifende Kompatibilität, und es besteht keine Notwendigkeit, die Dateien selbst zu hosten.

CSS-@font-face-Regel

css

@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;
}

Auf die gleiche Weise kann ein Stylesheet im <head> des HTML-Dokuments und nicht im CSS mit demselben Asset verknüpft werden.

HTML

html

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

Dann können die Elemente wie bei den anderen Methoden gestaltet werden:

CSS

css

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

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

CSS

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

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>

Try it Yourself »

Werte

Font Descriptor	Values	Description
font-family	name	It defines the font's name and it is a requirement.
src	URL	It defines the URL where the font will be downloaded and it is a requirement.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	It defines how the font will be stretched. Its default value is normal and it is optional.
font-style	normal italic oblique	It defines how the font will be styled. Its default value is normal and it is optional.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	It defines the font boldness. Its default value is normal and it is optional.
unicode-range	unicode-range	It defines the range of unicode characters the font supports. Its default value is U+0-10FFFF and it is optional.

Practice

What is the purpose of the @font-face rule in CSS?

To specify a custom font in your web pageTo change the background color of a websiteTo add an external style sheet to a HTML documentTo embed a font into a web pageTo control the layout of a web page

CSS-@font-face-Regel ​

OTF / TTF ​

EOT ​

SVG/SVGZ ​

WOFF/WOFF2 ​

Syntax ​

Beispiel der @font-face-Regel: ​

Browser-Unterstützung ​

Tiefstmögliche Browser-Unterstützung ​

Praktisches Niveau der Browser-Unterstützung ​

Sehr progressive Browser-Unterstützung ​

Alternative Techniken ​

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

Werte ​

Practice ​

CSS-@font-face-Regel

OTF / TTF

EOT

SVG/SVGZ

WOFF/WOFF2

Syntax

Beispiel der @font-face-Regel:

Browser-Unterstützung

Tiefstmögliche Browser-Unterstützung

Praktisches Niveau der Browser-Unterstützung

Sehr progressive Browser-Unterstützung

Alternative Techniken

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

Werte

Practice