Schriften in die Website einbinden

War es bis vor kurzem nur möglich, Standart-Systemschriften (Arial, Verdana, Times New Roman, Courier etc.) auf seiner Website anzeigen zu lassen, so setzt sich die individuelle Schriftgestaltung auf Seiten immer mehr durch. Nicht nur in Blog-Systemen oder Seiten wie about.me lassen sich individuell Schriften auswählen. Jeder kann auf seiner eigenen Seite für typografische Individualität und, durch die technische Optimierung für die Bildschirmausgabe, für bessere Lesbarkeit sorgen. Dafür stellen die großen und kleinen Schriftenhäuser immer mehr Webfonts her und bieten sie zum Kauf oder kostenlosen Download an. Jedoch nicht jeder Browser zeigt zur Zeit diese Webfonts an.

Grundsätzlich muss man zwischen zwei Varianten der Einbindung individueller Schriften unterscheiden:

1.
Man legt die Schriften in einem Verzeichnis auf dem Server der eigenen Website ab und fügt sie mittels CSS in die Seiten ein.

Diese Schriften liegen bei Schriftenhändlern, z.B. bei FontShop oder Fontspring, im .woff und .eot Format vor. Diese Formate werden von Firefox, Internet Explorer und Chrome unterstützt (Safari leider nicht). Mit der Seite Fontfonter kann man schon mal vorab die Wirkung bestimmter Schriften auf seiner Seite ausprobieren (Achtung! Durch einen Programmiertrick funktioniert dies auch in Safari!).

Alle notwendigen Informationen zum Einsatz von Webfonts und einen kostenlosen Font zum Download bietet FontShop auf einer Themenseite.

«Fontspring» bietet einige seiner Schriften kostenlos oder zum kleinen Lizenz-Preis für die Einbindung in Websites an. Großer Vorteil, man erhält ein Schriftenpaket, das neben den Formaten .woff und .eot auch eine OpenType-Schrift (für die Desktop-Nutzung) enthält. Einen Überblick über die Webfonts, die unterstützten Browser und Formate und die Vorteile gegenüber des Schriftenmietens bei «Typekit» (siehe 2.) gibt es hier.

Fontssquirrel, eine gute Quelle für Free Fonts, bietet mit dem @font-face generator ein Werkzeug, zur Umwandlung von Fonts in das .eot- und .woff- Format

2.
Die Schrift liegt auf einem fremden Server und wird kostenlos oder kostenpflichtig mittels CSS in die Seiten eingebunden. Der Vorteil dieser Technik liegt in der Darstellung der Schriften in nahezu allen Browsern und auf mobilen Geräten.

Google hostet eine Reihe von Webfonts und bietet diese kostenlos zur Einbindung in die eigene Seite an. Eine Anleitung und einen Schriftenüberblick gibt es hier.

Bei «Typekit» mietet man Schriften auf Grundlage von Seitenaufrufen (Page Views) auf seinen Seiten.

Die Nutzung einer Schrift bei bis zu 25.000 Seitenaufrufen ist kostenlos. Für kleine Seiten also durchaus, angesichts der Auswahl an hochwertigen Schriften, eine Alternative zu den Schriften bei google. Die Nutzung ist einfach und auf der Seite von Typekit gut erklärt.

Weitere Informationen bei drweb.de

Benötigte Werkzeuge zum Einbinden der Schriften in die eigene Seite

Um die Stylesheets in seinen Quellcode einzubinden, kann man auf jeden Texteditor zurückgreifen. Einfacher machen diese Arbeit aber spezialisierte Programme, besonders wenn man keine oder wenig Erfahrung mit CSS hat. Einen Überblick über CSS-Editoren gibt es hier.

Ich benutze auf dem Mac das einfach zu bedienende CSSEdit. Sehr nützlich zum analysieren der Seite und ausprobieren von Programmierungen (CSS, HTML, JavaScript) live in der Website ist das Firefox Add-on Firebug.

Für den Transfer der CSS-Dateien vom und zum Server nutze ich den empfehlenswerten FTP-Client Cyberduck (für Mac & Win) der es auch ermöglicht, Dateien direkt auf dem Server zu bearbeiten.

So, das war nun genug zu Webfonts! Pinsel in die Hand!
Film: Ein großer und ein kleiner Mensch Schreiben das Alphabet.