So kannst Du den ersten .woff-Font testen

Seit vorges­tern bietet FontShop den ersten .woff-Font zum Ausprobieren an (vgl.: Ein histo­ri­scher Abend). Es hat mir natür­lich keine Ruhe gelassen, die Schrift hier im Fontblog mal selbst einzu­setzen. Erst dachte ich, man muss im Theme herum schrauben und kompli­zierte CSS-Strukturen durch­forsten. Ist aber nicht nötig. Ein paar Zeile Code hier zwischen den Text geschrieben erlaubt des Ausprobieren in einem singu­lären HTML-Textblock. Den Code findest Du am Ende.

Wer diesen Text mit Firefox 3.6 liest, sieht ihn in einer anderen Schrift als mit Internet Explorer, Safari oder Opera. Ich nutze ein neues Feature in Firefox, die Unterstützung des .woff-Font-Formats. Als erster .woff-Font erschien gestern zum Testen die FF Nuvo Medium, die sich jeder hier kostenlos laden kann.
Wie habe ich diesen Textabschnitt in das Fontblog einge­baut? Ganz einfach. Lege die .woff-Datei in ein Verzeichnis auf Deinem Server, bei mir ist das der Pfad (url)/wp-content/uploads/2010/01/. Dann fügst die unten stehenden Zeilen Code irgendwo in diesen Beitrag ein, die den Schriftstil defi­nieren und für die Leser versteckt bleiben. Fertig … pfiffig, oder? Sonderzeichentest: ⅓ ⅔ ⅛ ⅜ ⅝ ⅞ ff fi fl ffi ffl st ə Ŧ … 

Hier die Code-Zeilen für die Definition der Schriftgestaltung und das Einbetten laden …


23 Kommentare

  1. Dennis

    Achja, Chrome zeigt mir auch eine andere Typo.

  2. Michael Müller-Hillebrand

    Leider verstößt die Einbettung hier gegen die Lizenzbedingungen, Details per Mail.

  3. Georg

    Scheint alles noch nicht ganz gar zu sein, obwohl ja die Type FF Nuvo ein sehr gelun­gener WebFont ist.
    Vielleicht mal (Apple) vorschlagen den per Default ins OS zu inte­grieren. Dann ist das auch nicht mehr so ein gefrickel.

  4. Martin

    Wo kann man denn Schriften wie die MetaWebPro kaufen? Schon letzte Woche verzwei­felt gesucht.. Fontshop suche findet leider nichts. Eine eigene Kategorie für Webschriften wäre toll.

  5. Jürgen Siebert

    Michael: Das mit den Lizenzbestimmungen stimmt, ich muss noch was in die httac­cess -Datei, oder wie die heißt, eintragen. Das muss mir Ivo machen … und er hat mich auch darauf hingewiesen.

    Martin: Web-FontFonts sind noch nicht in den Shops erhält­lich, aber bald, jede Menge, auch FF Meta Web.

  6. Michael Müller-Hillebrand

    Hach je, ich verwende das Plug-in NoScript und muss Skripte erlauben, damit der Font darge­stellt wird. Insofern finde ich die Implementierung in Firefox subop­timal. Warum werden Fonts Skripten gleich­ge­stellt…? Kann natür­lich FS[I] nix dafür…

  7. Simon

    Michael: Ich hatte auch zuerst den Eindruck, dass das Font-Embedding (nicht-woff, ich verwende noch 3.5) an das Skripting gekop­pelt sein, dem ist aber nicht so. In NoScript gibt es eine spezi­fi­sche Option für @font-face (dritte Seite der Optionen: “Embeddings”). Macht man den Haken bei “Forbid @font-face” weg, lässt NoScript die Fonts zu.

    Viele Grüße,
    Simon

  8. Thomas Maier

    FAIL. webfonts gehen in allen browsern. ;)

  9. Martin

    Apropos: Wer auf seiner Webseiten Schriften einge­bunden hat, sollte mal über­prüfen, ob sie gzipt werden. Zb muss man hier 79kb für die Axel laden. Komprimiert wärens nur noch 40kb. Ausserdem gibt es noch Tools mit denen man Zeichen raus­werfen und somit die Größe redu­zieren kann. So käme man mit der Axel auf nur 9kb!

  10. BAR M Grafikdesign

    Lieber Jürgen Siebert,

    die lizenz­recht­liche Seite wurde jetzt schon ein paar Mal kurz ange­schnitten. Könnten Sie noch mal kurz zusammen fassen, was in Bezug auf die Schrift-Lizenzen anders gegen­über der Verwendung für Print-Produkte ist?

    Oder gibt es keinen Unterschied (Erst Kaufen, dann Verwenden)? Wird die Schrift beim Einbetten auf der Website weiter gegeben oder nicht?

    Vielen Dank.

  11. Michael Müller-Hillebrand

    Je mehr tech­ni­sche Hürden zum Einsatz von Webfonts bestehen, desto eher wird es a) eine Domäne von Spezialisten bleiben (Komprimierung, htac­cess-Konfiguration, Subsetting) oder b) die Regeln werden einfach nicht einge­halten (htac­cess).
    Für Verschwörungstheoretiker: b) ist eine wunder­bare Möglichkeit für Massenabmahnungen (»entgegen den Lizenzbestimmungen ist der Font frei ladbar«, erhöhte Lizenzkosten, Anwaltsgebühr…). Man unter­suche die Verflechtung von Font Foundries und Abmahnanwälten! (Leider nicht wirk­lich lustig.)

  12. Marc

    Ich finde den Font mächtig unscharf. Sehr umbe­quem zu lesen. Zudem muss ich Beitrag 12 Recht geben. Das könnte der casus knacktus sein.

  13. JohanneS.

    Die „Unschärfe“ ist ja kein Schrift-, sondern ein Firefox-Problem, da dieser Browser bei der Schriftdarstellung alles andere gelungen ist: alle Schriften werden grau und fettig.
    Zum Vergleich kann man beispiels­weise die ziem­lich will­kür­lich ausge­wählte Seite http://​www​.engst​feld​-weiss​.de/ aufrufen, mal in Firefox, mal in einem anderen Browser. Deren @font-face-Feature einer anderen Foundry funk­tio­niert auf nahezu allen Browsern. Da fragt man sich: Warum kann die Typotheque das, aber der Fontshop nicht?

  14. Max

    Prima, das klappt sogar in den Kommentaren (jeden­falls in der Vorschau).

  15. Max

    schade, doch nicht :(

  16. Sebastian

    In meinem Firefox 3.6 auf dem Mac gibt es Probleme bei der Linkdarstellung. Der Link wird zwar gelb beim Mouseover, jedoch hüpft die gepunk­tete Linie ziem­lich weit nach unten.

  17. Markus Dermietzel

    “Web-FontFonts sind noch nicht in den Shops erhält­lich, aber bald, jede Menge, auch FF Meta Web.” Endlich – da warten alle Interfacedesigner sehn­süchtig darauf! Ich bin sehr gespannt, wie die Lizenzen aussehen werden…

  18. Markus Dermietzel

    P.S. gibt es die Web-FontFonts auch im eot-Format (Embedded Open Type) für den Internet-Explorer?

  19. Oli

    Wie kann ich denn mit htac­cess gewähr­leisten, dass meine mit @font-face einge­bet­teten Fonts (gekauft bei font­shop) vor ille­galem Download geschützt sind? Könnte ich dann auch http://​www​.fonts​quirrel​.com einsetzen? Oder muss die Schrift explizit für den Einsatz im Web frei­ge­geben sein?

  20. Ivo

    Oli, auch wenn ich nicht weiß, von welchem Hersteller die von dir lizen­zierte Schrift ist, kann ich mit ziem­li­cher Sicherheit sagen: nein, du kannst fonts­quirrel nicht nutzen. Ich kenne keine über FontShop vertrie­bene Schrift, die a) eine Konvertierung erlaubt, b) eine Weitergabe an Dritte (in dem Fall an das Eichhörnchen) und c) das Verbreiten der Datei über ein Verlinken im CSS gestattet. All das würde aber bei der Nutzung und Verwendung der entste­henden Datei passieren. Die Schrift muss explizit in ihren Lizenzbestimmungen sowas erlauben bzw. nicht verbieten (was in der Regel durch möglichst allge­mein­gül­tige Aussagen passiert). Wie du die .htac­cess konfi­gu­rierst kannst du übri­gens im Web FontFont User Guide nach­lesen, der in der ZIP-Datei enthalten ist.

  21. Stefan

    Habe ich das Lizenzproblem richtig verstanden? Wenn ich die Fontdatei vor einem direkten Zugriff bzw. Download schütze, kann ich lizenz­recht­lich nichts falsch machen?

  22. Angelo

    Ganz mein Meinung

Kommentarfunktion ist deaktiviert.

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