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 ästhe­tisch.

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 ähnli­ches.
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äsen­tieren.

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äu­tert.

Wie werden Webfonts instal­liert?

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 defi­nieren:

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 ange­zeigt?

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 ausge­tauscht.

Was passiert, wenn meine mit Web-FontFonts gestal­tete Seite mit einem Browser empfangen wird, der Webfonts nicht unter­stü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 ange­boten.

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 ange­boten.

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 besu­chen.

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 ermit­telt?

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 instal­lieren?

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 instal­liert.

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

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 instal­liert.

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

Auf dieser Delicious-Seite haben wir weitere Links zum Thema zusam­men­ge­tragen.


8 Kommentare

  1. Kacper

    Toll! Vielen Dank für diese Übersicht!

  2. Thomas

    „Warum gibt es kein einheit­li­ches Schriftformat, das alles kann?“ ist aller­dings nicht wirk­lich beant­wortet.

    Die korrekte Antwort lautet „weil wir wie alle anderen kommer­zi­ellen Schrifthändler Angst vor Raubkopien haben“, verbunden mit „weil wir für das neue Anwendungsgebiet einen neuen Markt mit eigenen (zusätz­li­chen) Preisen etablieren wollen“.

    Das da oben ist einfach nur eine ablen­kende Irreführung, weil nichts davon mit OFF/OpenType nicht genauso umsetzbar wäre (WOFF ist ja im Prinzip nix anderes als OFF/OpenType, nur mit anderem Geschenkpapier und einem Schleifchen drumrum).

    Warum nicht einfach zur eigent­li­chen Motivation stehen? Ist doch nichts Ehrenrühriges, sondern freie unter­neh­me­ri­sche Entscheidung. Wenns so falsch wäre, wird sich schon jemand finden, der es anders macht.

    Bei solchen PR-Aktionen fühle ich mich nur immer etwas verschau­kelt.

    Der Artikel ist ansonsten super, die Broschüre ist eben­falls oberste Schublade. Aber so richtig leicht geht mir eine „Das mußt du unbe­dingt lesen“-Empfehlung dann eben doch nicht über die Lippen, wenn ich mich bei diesem (einen und vergleichs­weise neben­säch­li­chen!) Punkt schon nicht als „auf Augenhöhe“ behan­delt fühle, sondern als „Onkel Jürgen erzählt jetzt mal eine Geschichte“.

    Naja, ist wohl Marketing und Geschäftsleben. Muß ich nicht im Detail verstehen oder gut finden. Und auffallen wirds der Zielgruppe sowieso nicht. Der ist das eigent­lich eh egal, die will nur wissen, wo sie die Schriften kaufen kann und wie dann die Verwendung funk­tio­niert.

    Insofern hat der Punkt wohl ähnliche Bedeutung wie der erste Absatz in einem Deutschaufsatz.

  3. Jürgen Siebert

    Die korrekte Antwort lautet ›weil wir wie alle anderen kommer­zi­ellen Schrifthändler Angst vor Raubkopien haben‹, verbunden mit ›weil wir für das neue Anwendungsgebiet einen neuen Markt mit eigenen (zusätz­li­chen) Preisen etablieren wollen‹. … Warum nicht einfach zur eigent­li­chen Motivation stehen?

    Die Antwort ist einfach, Thomas, und sie wird dich über­ra­schen: Das Tenor meines Beitrags lautet, wie unschwer zu erkennen ist: Was bringen Euch Webfonts?! Er lautet nicht: Was bringen uns die Webfonts. Um uns geht es erst mal gar nicht. Denn wenn die Webfonts keinen Nutzen haben, wenn kein Bedarf ist, dann erle­digt sich das Thema sowieso von selbst. Die Klagen in den vergan­genen Jahren lassen uns glück­li­cher­weise das Gegenteil erhoffen. Es wird FontShop/FSI nicht gelingen, unnütze Produkte in die Welt zu setzen.

    Im übrigen hast Du die unter­neh­me­ri­sche Komponente wunderbar heraus­ge­ar­beitet, so dass ich dem nichts mehr hinzu­fügen muss. Glaube aber bitte jetzt nicht, dass Du der einzige bist, der das gemerkt hat :) FontShop erfreut sich einer über­durch­schnitt­lich aufge­klärten Kundschaft :))

  4. Thomas

    Okay, dann also nix für ungut. Solange ich es noch merke, solls mir recht sein. Blöd ist nur, wenn ichs nicht mehr merke. :-)

  5. Adam

    Ich würde mir die FF Scala Sans als Webfont wünschen.

  6. Helen

    Ich habe das Nuovo-Testpaket auspro­biert und bin zu Media-Markt gefahren, um mir ein reprä­sen­ta­tives Bild auf vielen Rechnern zu machen. Die Konturen sind in IE, FF und Opera genauso ausge­franst wie die Fonts von Font-Squirrel u.a. Nur in Safari ist die Darstellung auf Windows annehmbar.

    Ich werde die Quadraat als Brotschrift auspro­bieren, aber alles über 16px ist mir zu riskant.

    Die Umsetzung im FF-Shop ist wie immer kata­stro­phal. Nach fünf­zehn Clicks irgendwo der unver­schämte Hinweis, es gebe noch gar nichts zu Webfonts, man solle sich an den Office-Fonts orien­tieren. Schlechter kann man eine Webseite nicht gestalten.

  7. Hanso

    Wo kann man denn die Webfonts kaufen? Ich wollte auf FontShop​.de suchen, finde da aber nur die regu­lären Office-Schriften und -Pakete. Gibt’s da einen versteckten Link? Auch auf der Erklär-Seite findet man keinen Link zum Katalog.

    Danke.

  8. R::bert

    Wollte mich eben über den Preis der Meta (Woff) erkun­digen. Finde aber auf der Fontshop-Seite nichts. Gibt es einen direkten Link?

Kommentarfunktion ist deaktiviert.

<em>kursiv</em>   <strong>fett</strong>   <blockquote>Zitat</blockquote>
<a href="http://www…">Link</a>   <img src="http://bildadresse.jpg">