Webfonts: Fragen und Antworten (Stand 18. 3. 2010)

Webfont ist eine neue Kategorie digi­taler Schriften, die nicht in Drucksachen sondern auf Webseiten einge­setzt werden. Webdesigner imple­men­tieren sie auf einem Webserver mit der @font-face-Regel in den Stilvorlagen einer Website (CSS). Von dort gelangen sie, gemeinsam mit Texten und Bildern, über einen Browser auf den Bildschirm eines Webseiten-Besuchers. Auf diese Art können erst­mals kopier­bare, skalier­bare und inde­xier­bare HTML-Texte die gleiche indi­vi­du­elle Typografie für alle Besucher aufweisen.

Alle tech­ni­schen Fragen zu den Webfonts beant­wortet unser 12-seitiger Benutzerleitfaden (Abbildung links, PDF hier laden). Die wich­tigsten sind nach­fol­gend kurz zusam­men­ge­fasst, aktu­elle Fragen zu Preisen und Vertrieb kommen in den nächsten Stunden dazu.

Warum gibt es kein einheit­li­ches Schriftformat, das alles kann?

Die Verbreitung geschrie­bener Worte per Drucksache (einschließ­lich PDF) und die Kommunikation per Internet unter­scheiden sich nicht nur logis­tisch, sondern auch tech­nisch und ästhetisch.

a) Logistik. Während »Drucksachen« in einer vom Urheber defi­nierten unver­än­der­baren Gestalt vertrieben werden, entstehen Internetseiten bei Bedarf, im Browser des Empfängers. Zu diesem Zweck bekommt er von einem Webserver alle Elemente einer Seite gelie­fert: Text, Bild und multi­me­diale Inhalte. Die Lieferung der verwen­deten Schriften war jahre­lang nicht möglich, so dass die Darstellung der Seite mit den lokal vorhan­denen Systemschriften erfolgte. Mit Einführung der @font-face-Regel, als Erweiterung zu den Cascading Style Sheets, wurde die Lieferung von Fonts vorbe­reitet; das neue (von Schriftentwerfern erfun­dene) Font-Format WOFF bahnte zusätz­lich den Weg dafür, dass bald die bekannten Originalschriften für die verbind­liche Gestaltung von Webseiten zur Verfügung stehen werden.
b) Technik. Webfonts müssen Eigenschaften erfüllen, die bei Prepress-Fonts weniger wichtig sind: kleine Dateigröße, gute Bildschirmdarstellung, Verschlüsselung und Sicherheit. Andere Eigenschaften der PrePress-Schriften sind von geringer Bedeutung: exzes­sives Kerning, Ligaturen, Kapitälchen, diverse Ziffernsätze, typo­gra­fi­sche Features, und ähnliches.
c) Ästhetik. Weil Texte am Bildschirm anders gelesen werden als auf Papier, und weil die Restriktionen bei der Zeichendarstellung an einem Monitor größer sind, werden in abseh­barer Zeit neue Webfonts erscheinen, deren Buchstabenformen diese Gegebenheiten berück­sich­tigen. Doch auch die Klassiker der Druckvorstufe lassen sich als Webfont auf dem Bildschirm hinrei­chend gut lesen. Vor allem kommt ihre Verfügbarkeit dem Wunsch vieler Unternehmen und Marken entgegen, sich gedruckt und im Web mit glei­cher Typografie zu präsentieren.

Was enthält ein Web-FontFont-Paket?

Die Web-FontFonts kommen in zwei DRM-freien Formaten: EOT Lite und WOFF, die ohne Fremdhilfe auf dem eigenen Webserver instal­liert werden können. Beide Formate werden mit jedem Web-FontFont-Download gemeinsam gelie­fert. Ebenfalls im Lieferumfang: Benutzerleitfaden (PDF, 201 K), Lizenzbestimmungen (EULA) und eine Schriftmuster-HTML-Seite:

Welche Browser unter­stützen die Webfonts aus der FontFont-Bibliothek?

Der Internet Explorer (ab Version 4) unter­stützt EOT, Firefox (ab Version 3.6) unter­stützt WOFF. Andere Browser unter­stützen WOFF im Moment noch nicht; Fachleute erwarten jedoch, das dies bald geschieht.

Gibt es die Möglichkeit für Web-FontFont-Kunden, nicht unter­stützte Browser über den Mietfont-Service Typekit zu bedienen?

Ja, FontShop bietet Ihnen die Möglichkeit, selbst gehos­tete Web-FontFonts (erworben auf www​.font​blog​.de) über einen Account bei Typekit parallel zu hosten. Wie das funk­tio­niert, ist auf dieser Seite Schritt für Schritt erläutert.

Wie werden Webfonts installiert? 

Es gibt unter­schied­li­chen »Philosophien« bzgl. der Implementation. Gerne wird auf Paul Irish: Bulletproof @font-face syntax verwiesen. FSI und FontShop haben diese Anleitung ausführ­lich getestet und gelernt, dass es Probleme im Internet Explorer gibt, wenn es um die Einbindung und Stilverlinkung mehrerer Schnitte einer Familie geht. Daher empfehlen wir den folgenden Weg (ausführ­lich beschrieben im Benutzerleitfaden, mit heraus­ko­pier­baren Code-Schnipseln):

Laden Sie die Web-FontFont-Dateien (.eot und .woff) auf Ihren Webserver. Verwenden Sie das nach­fol­gende Cascading-Style-Sheet-Code-Beispiel (CSS) um Ihre Web-FontFonts einzu­binden; ersetzen Sie den Font-Dateipfad (der Klammerausdruck hinter »url«) durch den tatsäch­li­chen Pfad auf Ihrem Server:

Nun müssen Sie noch mittels CSS-Font-Stack auf Ihre Web-FontFont-Schriftfamilie verweisen, so wie bei anderen Schriften üblich, zum Beispiel:

Wie instal­liere ich eine stil­ver­linkte Gruppe von Webfonts aus einem FontFont-Basic-Paket?

Setzen Sie die font-weight- und font-style-Eigenschaften in Ihrer @font-face-Regel ein, um eine Gruppe stil­ver­linkter Fonts unter einem gemein­samen Namen zu definieren:

Sie müssen sich nicht an die weit verbrei­tete Regular–Bold–Italic–BoldItalic-Kombination halten, sondern können belie­bige Stile verknüpfen. Das untere Beispiel verlinkt Light mit Extra Bold und ihren beiden Kursiven.

Die stil­ver­knüpften Fonts werden nun überall dort aufge­rufen, wo ein Schriftstilwechsel defi­niert ist, zum Beispiel em (Betonung: übli­cher­weise kursiv) oder strong (starke Betonung: übli­cher­weise fett/bold).

Kann man die Web-FontFonts auch für Drucksachen einsetzen?

Nein. Die Fonts sind für den Einsatz auf Webservern gefer­tigt, so dass Internetseiten beim Empfänger mit den von Webdesigner ausge­suchten Web-FontFonts am Bildschirm erscheinen.

Kann der Empfänger einer mit Web-FontFonts gestal­teten Internetseite diese so ausdru­cken, wie am Bildschirm angezeigt?

Das hängt vom Browser ab. Firefox druckt statt der Webfonts die im CSS-Font-Stack ange­ge­benen Ersatzschriften, Internet Explorer benutzt die Webfonts auch zum Drucken. Eine 1:1-Kopie der ange­zeigten Internetseite entsteht durch einen Bildschirm-Schnappschuss, der sich anschlie­ßend drucken lässt.

Kann ich ein PDF von einer Webseite mit den Webfonts erstellen?
Nein, die Webfonts werden durch die im CSS-Font-Stack ange­ge­benen Ersatzschriften bzw. die Ersatzschriften AdobeSans und/oder AdobeSerif ausgetauscht.

Was passiert, wenn meine mit Web-FontFonts gestal­tete Seite mit einem Browser empfangen wird, der Webfonts nicht unterstützt?

Die Seite wird in der Ersatzschrift/den Ersatzschriften darge­stellt, die vom Webdesigner in den CSS-Anweisungen einge­tragen sind.

Ich möchte ein FontFont-Familie sowohl für Drucksachen, als auch im Internet einsetzen. Was muss ich beachten?

Für beide Einsatzgebiete sind unter­schied­liche Font-Formate erfor­der­lich: für Drucksachen entweder OpenType-Schriften (.oft) oder die jüngst erschie­nenen Office-Fonts (.ttf), für den Internetseinsatz die neuen Web-FontFonts (.eot, .woff).

Bekomme ich einen Nachlass bei der Lizenzierung von zwei unter­schied­li­chen FontFont-Formaten?

Je nach der Höhe Ihres Auftrags und/oder dem Umfang einer Multilizenzierung kann ein Handelsrabatt gewährt werden. Eine Multi-Format-Rabattierung wird vom Herausgeber FSI nicht angeboten.

Gibt es einen Upgrade-Preis auf bereits lizen­zierte FontFonts für Drucksachen?

Je nach der Höhe Ihres Auftrags und/oder dem Umfang einer Multilizenzierung kann ein Handelsrabatt gewährt werden. Eine Multi-Format-Rabattierung wird vom Herausgeber FSI nicht angeboten.

Wer kauft/lizenziert einen Webfont: der Webdesigner oder sein Auftraggeber?

Typischerweise der Auftraggeber, für den ein Designer eine oder mehrere Webseite(n) einrichtet, weil sie auf dem Webserver des Webseitenbetreibers gehostet werden.

Gibt es eine live-Seite, auf der ich Webfonts im Einsatz sehen kann?

Ja, zum Beispiel auf dieser Seite von www​.edenspie​ker​mann​.com/​w​off, die FF Meta und FF Meta Serif im .woff-Format zeigt (bitte mit Firefox 3.6 besu­chen). Auf dieser Fontblog-Webfont-Testseite kann der kosten­lose Testfont FF Nuvo Medium Web in verschie­denen Größen betrachtet, skaliert und mit eigenen Mustertexten begut­achtet werden: Bitte mit Firefox 3.6 oder Internet Explorer besuchen.

Wie ist die Qualität der Bildschirmdarstellung der Webfonts?

Die Webfonts basieren auf TrueType-Fonts, die für die Darstellung mit ClearType opti­miert sind. Wie die Fonts mit verschie­denen Systemeinstellungen darge­stellt werden, kann man auf diesem flickr-Screenshot-Set studieren … Sie zeigt 1:1-Screenshots eines Mac LCD Rendering, Mac CRT Rendering, Windows ClearType Font Smoothing, Windows Standard Font Smoothing (Greyscale) und Windows Pur (No Font Smoothing).

Wie werden die Pageviews für die Traffic-Kalkulation ermittelt?

Sie werden – gemäß der Erfahrungen aus den eigenen Web-Statistiken – vom Lizenznehmer ermit­telt und beim Erwerb der Web-FontFonts ange­geben. Geht eine Website neu an den Start, werden sie grob geschätzt.

Muss ich einen Code zum Protokollieren des Traffics installieren?

Im Gegensatz zum Webfont-Mieten ist bei den selbst gehos­teten Web-FontFonts kein Tracking-Code erfor­der­lich; ein solcher wird weder ange­boten, noch auto­ma­tisch installiert.

Was mache ich, wenn der Traffic meiner Website mit der Zeit steigt und 500.000 Pageviews/Monat übersteigt?

Wie bei den Fonts für Drucksachen auch, wenn diese auf mehr Arbeitsplätzen zum Einsatz kommen als ursprüng­lich lizen­ziert: Nachlizenzieren.

Wie kann ich das Hotlinking von Webfont-Dateien auf meinem Webserver blockieren?

Wenn andere Websites sich mit den auf Ihrem Webserver gehos­teten Webfont-Dateien verlinken (auch Hotlinking genannt), benutzen sie Ihre Fonts, die sie selbst nicht lizen­ziert haben, und sie erzeugen bei Ihnen Datenverkehr, der sich zu Ihren Hostingkosten addiert. Die Web-FontFont-EULA (Nutzungsvertrag) setzt voraus, dass vertret­bare Maßnahmen gegen das Hotlinking von urhe­ber­recht­lich geschützten Font-Daten ergreifen werden.

Eine vertret­bare Maßnahme ist das Einrichten eines Referrer-Check auf dem Webserver. Jede Anfrage nach einer Font-Datei, die nicht von der eigenen Site kommt, wird blockiert, wenn man die nach­fol­genden Regeln der Serverkonfiguration hinzufügt (das Beispiel ist für einen Apache-HTTP-Server gewählt).
Angenommen die Adresse Ihrer Website sei www​.example​.com und die Web-FontFont- Dateien lägen in einem Unterverzeichnis /fonts/. Erstellen Sie eine Datei mit dem Namen .htac­cess in diesem Verzeichnis und fügen Sie die folgenden Zeilen ein:

Ersetzen Sie example​.com durch Ihre Domainadresse. Vor dem Punkt muss ein Backslash stehen. Der Reguläre Ausdruck (www.)? besagt, dass sowohl URLs mit als auch ohne ›www‹ für Ihre Site gelten. Anfragen für alle Dateitypen mit den Endungen .woff oder .eot mit einem externen oder leeren Referrer werden einen HTTP-Fehler 403 (›forbidden‹) auslösen. Die Zeile Options -Indexes verhin­dert das Auflisten der Dateien im Font-Verzeichnis. Weitere Informationen im Webfont-Benutzerleitfaden (S. 10).

Wie über­prüfe ich das erfolg­reiche Unterdrücken von Webfont-Hotlinks?

Einfach den .woff-Font im Browser aufrufen (z. B.: http://​www​.meine​site​.de/​f​o​n​t​s​/​m​e​i​n​w​e​b​f​o​n​t​.​w​off). Erscheint Code, ist das Hotlinking nicht blockiert, erscheint eine Fehlermeldung (Abb. unten), ist der Referrer-Check erfolg­reich installiert.

Gibt es noch mehr Quellen, wo ich mich infor­mieren kann?

Auf dieser Delicious-Seite haben wir weitere Links zum Thema zusammengetragen.