@font-face Regel zum Einbinden von Fonts in Webseiten

Mit Hilfe der CSS-Regel @font-face, lassen sich auf einfache Weise Webfonts in eine Webseite einbinden. Die Webfonts befinden sich in der Regel gemeinsam mit den Webseiten auf einem Server. Sie werden vom Browser bei Bedarf heruntergeladen und zur Darstellung verwendet.

Gute Unterstützung in modernen Browsern

Während mittlerweile alle modernen Browser wie Firefox, Opera und Chrome die Einbindung von Schriften als .otf (OpenType Format) unterstützen, kann man Apple mit dem Safari 3.1 als den Wegbereiter für dieses Verfahren betrachten. Einen etwas anderen Weg geht hier der Internet Explorer. Sie erwarten die Schriftartdateien in dem von Microsoft eingeführten Format .eot (Embedded OpenType), welches sich in vieler Hinsicht von OTF / TTF unterscheidet. Zu nennen ist hier vor allem, dass integrierte DRM, dass es ermöglicht, die Fonts an eine bestimmte Website zu binden.

Codebeispiel für eine CSS @font-face-Regel

01  @font-face {
02    font-family: "GraublauWeb";
03    src:url(http://www.meine-domain.tld/fonts/GraublauWeb-Regular.otf) format("opentype");
04  }
05
06  @font-face {
07    font-family: "GraublauWeb";
08    font-weight: bold;
09    src:url(http://www.meine-domain.tld/fonts/GraublauWeb-Bold.otf) format("opentype");
10  }
11
                

Übrigens können Sie hier die Graublau Sans Web kostenlos herunterladen.