Beliebige Schriftarten im Web mit CSS

Dieses Jahr feiert CSS sein zehnjähriges Jubiläum. Viele Eigenschaften von CSS drehen sich um die Gestaltung von Text: Farbe, Position, Stil, Laufrichtung. So muss es auch sein, denn Text nimmt noch immer den größten Teil aller Bildschirme ein. Was bislang schmerzlich vermisst wurde, waren Eigenschaften zur Handhabung von Schriftarten oder Fonts.

Damit ist mehr oder minder das gesamte Internet auf eine Handvoll “Standard”-Schriftarten eingeschränkt, die jeder Browser von Haus aus mitbringt und die auf jedem Computer in der Regel installiert sind. Was aber machen Designs wie etwa die vom CSS Zen Garden so beeindruckend? Oft werden hier exquisite Schriftarten pixelgenau positioniert, auf eine Bitmap abgebildet und als Hintergrund oder DIV-Element in das Design einbezogen.

Gegen die Verwendung von Hintergrundbildern zur Darstellung von Schriftarten spricht jedoch einiges. Bilder brauchen zur Übertragung wesentlich mehr Bandbreite als Text. Die Lokalisierung einer Internetpräsenz in 20 Sprachen bedeutet einen immensen Aufwand, wenn alle Textpassagen in Bilder umgewandelt werden müssen. Dazu kommen Probleme beim Ausdrucken: Moderne Drucker leisten oft 600 dpi oder mehr, während ein hoch auflösender Monitor augenfreundlich bei maximal 120 dpi eingestellt ist. Im Ausdruck sehen Texte in 120 dpi aber sehr mangelhaft aus.

Die gute Nachricht: Vor geraumer Zeit wurde Firefox 3.5 veröffentlicht. Auf Grund der einfachen, automatischen Updates von Firefox ist diese Version auch bereits weit verbreitet. Immer mehr Designer gehen daher dazu über, die neue CSS-Regel @font-face einzusetzen. Mit @font-face können Schriftarten in ihrem vollen Potential auf Webseiten eingesetzt werden.

Und so funktioniert es: Statt Text in Bilderchen zu verwandeln, können die Schriftarten über CSS mit Dateien verknüpft und vom Server geladen werden. Diese Verlinkung geschieht wie folgt:

@font-face {
font-family: “DejaVu”;
src: url(http://dejavu-fonts.org/files/fonts/dejavu.ttf) format(”truetype”);
}
h1 { font-family: “DejaVu”, sans-serif }

Wer sich ein wenig mit CSS auskennt, wird mit der letzten Zeile sicher etwas anfangen können: Hier wird die Schriftart für den HTML-Tag H1 ausgewählt. Die Anweisung @font-face ist weniger bekannt, aber leicht verständlich: Die Schriftart “DejaVu” wird ausgewählt, die Fontdatei wird von der angegebenen Adresse geholt. Die Syntax entspricht CSS2. Um lange, sich wiederholende Auflistungen von @font-face Anweisungen im Stylesheet zu vermeiden, können diese ausgelagert und per @import eingebunden werden, etwa so:

@import url(http://www.meinetolledomaene.de/fonts/index.css) all;
h1 { font-family: Liberation, serif }

Es werden in jedem Fall nur die Schriftarten vom Server geladen, die für die Darstellung der Seite tatsächlich nötig sind. Sie können also gerne alle Ihre Fontdateien in eine einzige CSS-Datei auslagern, die Sie für alle Projekte verwenden.

Alle in den angeführten Beispielen verwendeten URLs sind übrigens fiktiv. Sie sollten durch eigene Dateien auf eigenen Servern ersetzt werden. Beachten Sie dabei unbedingt die geltenden Bestimmungen zu Urheberrechten und die individuellen Copyrights der Schriftarten, die Sie einsetzen möchten. Auch die Verwendung von nur einer Auswahl an Schriftzeichen eines Fonts befreit Sie nicht von diesen Bestimmungen.

Eine gute Auswahl an interessanten und professionellen Schriftarten, die zudem frei verwendbar sind, können Sie finden unter smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design.

Nachdem die Schriftarten in die Webseite eingebunden sind, möchten Sie sicher noch andere Einstellungen an der Darstellung der Schriften vornehmen. Solche Einstellungen können jedoch ungeahnte Folgen nach sich ziehen bei Browsern ohne Unterstützung von @font-face. Achten Sie also immer darauf, dass Sie Alternativen für solche Browser angeben: Am einfachsten ist es, eine zusätzliche Schriftart aus den “Standard”-Fonts anzugeben, die der gewünschten Schrift relativ ähnlich sieht.

Comments are closed.