Eigene Schriftarten fürs Webdesign verwenden

von Clemens Gull

Wer ins Webdesign einsteigt, arbeitet zunächst in der Regel nur mit Standardschriften. Das heißt: Alle Schriften, die auf dem Anwendercomputer installiert sind, sind benutzbar. Aber da wir alle Systeme von den verschiedenen Windows- und Office-Versionen über Mac OS X bis zu Linux berücksichtigen müssen, ist die Auswahl sehr klein. Eine Times, eine Helvetica und schon ist es eigentlich vorbei mit der Typographie. In der CSS-Version 2 gab es zwar die Möglichkeit, externe Schriften einzubinden. Aber diese wurde laut W3C wegen mangelnder Unterstützung in der CSS-Version 2.1 wieder aufgegeben. Jetzt ist sie in der Version 3 von CSS wieder enthalten. Aber wie klappt das Ganze eigentlich? Und ist das eigentlich zulässig und statthaft?

Die Technik

Die Technik ist eigentlich ganz einfach. Wir stellen einen Font (eine Schriftart) auf einer URL zur Verfügung und verwenden ihn dann.

Dafür gibt es verschiedene Tools wie:
• GlyphGate (früher Fairy), eine kostenpflichtige Webserver-Extension
• Microsoft WEFT: Software zum Umwandeln von Schriften für das Web
• SIL International: Techniken zur Erzeugung von Schriften und verschiedene Ressourcen

Schriften in Cascading Style Sheets

Dieser Teil ist eigentlich relativ einfach, wird aber noch nicht von allen Browsern unterstützt. Zuerst müssen wir eine Schrift per FTP auf einen Webserver übertragen. Wir müssen ein wenig aufpassen, dass die Schrift auch von jedem System erkannt wird. Sehr gut eignen sich TrueType-Fonts, da sie eigentlich von jedem Betriebssystem angezeigt werden können. Falls wir ganz sicher gehen wollen, nehmen wir eine Schrift von SIL oder wandeln mit dem WEFT einen TrueType-Font um.

Der zweite Schritt besteht im Anpassen der CSS-Datei. Am Anfang fügen wir einen @font-face-Parameter ein.

@font-face {
font-family: Andika;
src: local(AndBasR) 
url(http://example.com/fonts/AndBasR.ttf);
}

In der 2. Zeile geben wir der Schrift einen Namen. Diesen können wir in der Folge im gesamten CSS mit dem Attribut font-family verwenden. Verwenden Sie dafür einen Namen ohne Leer- und Sonderzeichen!

In der 3. Zeile legen wir fest, woher die Schrift bezogen werden soll. Mit local() können wir den Browser anweisen, dass er die lokal installierte Schrift verwenden soll – natürlich nur, wenn sie auch lokal vorhanden ist. Falls dies nicht der Fall ist, kommt der Parameter url() zum Zug. Hier können wir eine URL (absolut oder relativ) angeben, von der die Schrift geladen werden soll. Der dritte Schritt ist dann die Verwendung der Schrift im CSS.

.entrytitle {
color: #8A8D18;
display: block;
font-family: Andika, Tahoma, Verdana, Helvetica, 
Arial, sans-serif;
font-size: 1.6em;
}

Wir sehen in der 4. Zeile, wie die im ersten Beispiel definierte Schrift angewendet wird. In diesem Beispiel wird darauf Rücksicht genommen, dass noch nicht alle Browser CSS 3 und den @font-face-Eintrag sauber unterstützen. Daher wurden als Alternativen weitere Schriften angegeben. Hier eine kleine Auswahl an Browsern und wie sie diesen Parameter unterstützen.

Lizenz & Recht
Hier müssen wir ein wenig aufpassen. Denn auch jede Schrift unterliegt dem Urheberrecht und wir dürfen sie nicht einfach weiterkopieren. Daher müssen wir uns den Lizenzvertrag zu jeder Schrift genau durchlesen. Oft ist es untersagt, die Schrift auf Websites einzusetzen oder öffentlich zur Verfügung zu stellen. Und genau das machen wir, wenn wir sie auf einem Webserver ablegen.

Dieser Text ist dem Buch “Webseiten-Layout mit CSS” von Clemens Gull entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Social Bookmarks: These icons link to social bookmarking sites where readers can share and discover new web pages.