@font-face

Aktualisierte Syntax (2019)

@font-face {
    font-family: "Lato";
    src: local('Lato Regular'),
         local('Lato-Regular'),
         local('Lato'),
         url('/path/to/webfonts/lato-regular-webfont.woff2') format('woff2'),
         url('/path/to/webfonts/lato-regular-webfont.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: "Lato";
    src: local('Lato Italic'),
         local('Lato-Italic'),
         url('/path/to/webfonts/lato-italic-webfont.woff2') format('woff2'),
         url('/path/to/webfonts/lato-italic-webfont.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: italic;
}
 
@font-face {
    font-family: "Lato";
    src: local('Lato Bold'),
         local('Lato-Bold'),
         url('/path/to/webfonts/lato-bold-webfont.woff2') format('woff2'),
         url('/path/to/webfonts/lato-bold-webfont.woff') format('woff');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

Erläuterung aus 2015

Über Kleinigkeiten bei der Einbindung von Webfonts kann man schnell stolpern. Es gibt zig Bulletproof @font-face Syntaxen, an dieser Front wird stetig gearbeitet. Jeder Browser hat seine Eigenheiten, wenn es darum geht, Schriften richtig einzubetten.

Welche Formate?

Diese Auflistung ist nur grob, einige Browser können in neueren Version auch mehr Formate lesen. Es soll nur klarmachen, dass alle vier Formate nötig sind, um den Webfont in allen relevanten Browsern darstellen zu können.

TTF: Chrome, Firefox, Safari
EOT: Internet Explorer < 9
SVG: iPhone, iPad
WOFF: Opera, Internet Explorer 9+

Generelle Syntax

Bei der Einbindung spielt die Reihenfolge der Formate ebenso eine Rolle wie Sonderzeichen. Das Fragezeichen hinter eot verhindert beispielsweise einen 404-Fehler im Internet Explorer. Beim svg wird anschließend das Hash-Zeichen mit korrektem Schriftnamen benötigt, der in der SVG-Datei gespeichert ist (z.B. <font id=„open_sans_condensedbold“ horiz-adv-x=„948“ >).

@font-face {
  font-family: "open_sans_condensedbold";
  src: url('OpenSans-CondBold-webfont.svg#open_sans_condensedbold') format('svg'),
       url('OpenSans-CondBold-webfont.eot?') format('eot'),
       url('OpenSans-CondBold-webfont.woff') format('woff'),
       url('OpenSans-CondBold-webfont.ttf') format('truetype');
}

Browser und ihre Eigenheiten

Opera

Wichtig: font-family unbedingt mit doppelten Anführungszeichen!

Firefox

Wichtig: Schrift-Dateien im gleichen Ordner wie CSS-Datei! Es gibt auch Lösungen über .htaccess-Einträge und absolute URLs, die in manchen Fällen dennoch nicht zum Ziel führen. Lokal zeigt der Firefox niemals Webfonts an.

Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis