Die Idee der sogenannten Web-Fonts ist schon sehr alt. Web-Fonts sind Schriftarten, deren Schriftartendatei einfach wie ein externes Stylesheet oder eine Grafik zusammen mit dem HTML-Code einer Webseite vom Webserver an den Browser übertragen wird. Einmal heruntergeladen und on the fly installiert oder interpretiert, befähigt sie den Browser, einen Text in dieser Schriftart anzuzeigen. Die Web-Font-Bemühungen der Vergangenheit waren jedoch ein unerquickliches und letztlich unfruchtbares Gerangel proprietärer Ansätze mit rein kommerziellem Hintergrund. Die Belange der Web-Designer blieben dabei außen vor. Mittlerweile ist allerdings Bewegung in die Sache gekommen. Moderne Browser akzeptieren diverse gängige Schriftartenformate wie TrueType oder OpenType, ohne Domain-Bindung und Ähnliches. Wer Wert auf individuelle Typografie mit nicht alltäglichen Schriftarten legt, kann die Schriftart einfach als Beipack zusammen mit den Webseiten ausliefern — vorausgesetzt, die Lizenzform der Schriftart erlaubt eine solche Verwendung.

Beispiel

<html>
<head>
<meta charset="utf-8">
<title>Titel</title>
<style>
@font-face {
   font-family: "Grana PadanoMedium";
   src: url("http://openfontlibrary.org/content/Daniel_J/104/GranaPadano.otf");
   format("opentype");
   font-weight:  500;
   font-style:   normal;
   font-variant: normal;
   font-stretch: normal;
}
h1 {
   font-family: "Grana PadanoMedium";
   font-size: 38px;
   color: #770055;
}
</style>
</head>
<body>
<h1>In Grana Padano</h1>
<p>So einfach geht das auf
<a href="http://openfontlibrary.org/">openfontlibrary.org</a>!</p>
</body>
</html>

@font-face-Beispiel im Browser

Erläuterung

Zunächst notieren Sie in einem zentralen Stylesheet — es kann sich um ein style-Element im Dokumentkopf oder um eine externe CSS-Datei handeln — eine @font-face-Regel. Diese Regel umschließt einen Block von Angaben zur Schriftartendatei. Die Angaben wie im obigen Beispiel sind typisch. Obligatorisch sind diese Angaben:

Mit font-family innerhalb eines @font-face-Blocks deklarieren Sie explizit den Namen der Schriftart. Unter diesem Namen können Sie die Schriftart anschließend in der normalen font-family-Eigenschaft (außerhalb eines @font-face-Blocks) oder in der generischen font-Eigenschaft verwenden.
Mit src: url(URL-Adresse); geben Sie die Quelle der Schriftartendatei an. Es kann sich um eine Quelle auf dem eigenen Webserver oder auf einem fremden Webserver handeln. Erlaubt sind letztlich alle Regeln und Möglichkeiten der Referenzierung wie in HTML.

Darüber hinaus sind weitere Angaben möglich oder erforderlich. Dazu gehören wie im obigen Beispiel die Standard-CSS-Eigenschaften, beginnend mit font-. Dabei handelt sich aber nicht um Wunschangaben, sondern um tatsächliche Default-Eigenschaften des Schriftschnitts.

Nachdem eine Schritart mit @font-face eingebunden ist, kann sie im Stylesheet verwendet werden. Das obige Beispiel verwendet die Schriftart, um h1-Überschriften zu formatieren.

Geeignete Schriftartenformate

Am häufigsten kommen derzeit die Schriftartenformate TrueType und OpenType zum Einsatz.

TrueType-Schriften sind aus der Windows-Welt hinreichend bekannt. Dort sind sie das Default-Schriftartenformat. Es gibt unzählige Schriften ganz unterschiedlicher Qualität in diesem Format. Die meisten unterstützten einen bestimmten Codepage-Zeichensatz, andere auch größere Teile des Unicode-Zeichenvorrats. Mit TrueType können aber auch neuere Mac- und Linux-Systeme umgehen.

Das OpenType-Format ist aus einer gemeinsamen Anstrengung von Microsoft und Adobe entstanden. Es ist dem TrueType-Format in verschiedener Hinsicht überlegen (so speichert es zum Teil platzsparender, erlaubt sprachspezifische Ligaturen und dynamische Zeichenkombinationen sowie digitale Signaturen (Wasserzeicheneffekte zum Urheberschaftsnachweis).

In Zukunft könnte sich auch das Web Open Font Format (WOFF) durchsetzen. Dieses Format ist ein Containerformat für TrueType- oder OpenType-Schriften. Es bietet die Möglichkeit, die Schriftarten mit zusätzlichen Meta-Daten auszuzeichnen. Außerdem komprimiert es besonders gut, so dass weniger Daten übertragen werden müssen. WOFF stammt aus der Mozilla-Schmiede. Firefox 3.6 erkennt das Format. Die neuesten Webkit-Browser Chrome und Safari ebenfalls, und der Internet Explorer soll es ab Version 9.0 beherrschen.

Weniger verbreitet sind reine Postscript-Schriften. Auch frühere Versuche, Web-Fonts zu etablieren, mit Formaten wie EOT, PFR usw., spielen keine wesentliche Rolle mehr.

Weitere Hinweise

Das Erstellen von hochwertigen Schriftarten ist extrem arbeitsintensiv und erfordert hohes Fachwissen. Deshalb sind die viele Schriftarten nur käuflich erwerblich, und die Mehrzahl von ihnen unterliegt Nutzungsbedingungen, die nicht mit einer Bereitstellung auf Webservern vereinbar ist. Achten Sie deshalb, bevor Sie Schriftarten für die Einbindung mit @font-face auf den Webserver laden, stets darauf, ob die Lizenz der Schriftarten ein beliebiges Weitergeben und Kopieren erlauben.

Referenzinformationen

Schriftarten mit @font-face:

Schriftformatierung < | > Ausrichtung und Absatzkontrolle

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.