Seit vorgestern bietet FontShop den ersten .woff-Font zum Ausprobieren an (vgl.: Ein historischer Abend). Es hat mir natürlich keine Ruhe gelassen, die Schrift hier im Fontblog mal selbst einzusetzen. Erst dachte ich, man muss im Theme herum schrauben und komplizierte CSS-Strukturen durchforsten. Ist aber nicht nötig. Ein paar Zeile Code hier zwischen den Text geschrieben erlaubt des Ausprobieren in einem singulä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 eingebaut? 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 definieren und für die Leser versteckt bleiben. Fertig … pfiffig, oder? Sonderzeichentest: ⅓ ⅔ ⅛ ⅜ ⅝ ⅞ ff fi fl ffi ffl st ə Ŧ …
Wie habe ich diesen Textabschnitt in das Fontblog eingebaut? 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 definieren 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 …
Startseite
Über Fontblog
Impressum
Werbung im Fontblog
Archiv
Achja, Chrome zeigt mir auch eine andere Typo.
Leider verstößt die Einbettung hier gegen die Lizenzbedingungen, Details per Mail.
Scheint alles noch nicht ganz gar zu sein, obwohl ja die Type FF Nuvo ein sehr gelungener WebFont ist.
Vielleicht mal (Apple) vorschlagen den per Default ins OS zu integrieren. Dann ist das auch nicht mehr so ein gefrickel.
Wo kann man denn Schriften wie die MetaWebPro kaufen? Schon letzte Woche verzweifelt gesucht.. Fontshop suche findet leider nichts. Eine eigene Kategorie für Webschriften wäre toll.
Michael: Das mit den Lizenzbestimmungen stimmt, ich muss noch was in die httaccess -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ältlich, aber bald, jede Menge, auch FF Meta Web.
Super, Danke.
Hach je, ich verwende das Plug-in NoScript und muss Skripte erlauben, damit der Font dargestellt wird. Insofern finde ich die Implementierung in Firefox suboptimal. Warum werden Fonts Skripten gleichgestellt…? Kann natürlich FS[I] nix dafür…
Michael: Ich hatte auch zuerst den Eindruck, dass das Font-Embedding (nicht-woff, ich verwende noch 3.5) an das Skripting gekoppelt sein, dem ist aber nicht so. In NoScript gibt es eine spezifische 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
FAIL. webfonts gehen in allen browsern. ;)
Apropos: Wer auf seiner Webseiten Schriften eingebunden hat, sollte mal überprü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 rauswerfen und somit die Größe reduzieren kann. So käme man mit der Axel auf nur 9kb!
Lieber Jürgen Siebert,
die lizenzrechtliche Seite wurde jetzt schon ein paar Mal kurz angeschnitten. 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.
Je mehr technische Hürden zum Einsatz von Webfonts bestehen, desto eher wird es a) eine Domäne von Spezialisten bleiben (Komprimierung, htaccess-Konfiguration, Subsetting) oder b) die Regeln werden einfach nicht eingehalten (htaccess).
Für Verschwörungstheoretiker: b) ist eine wunderbare Möglichkeit für Massenabmahnungen (»entgegen den Lizenzbestimmungen ist der Font frei ladbar«, erhöhte Lizenzkosten, Anwaltsgebühr…). Man untersuche die Verflechtung von Font Foundries und Abmahnanwälten! (Leider nicht wirklich lustig.)
Ich finde den Font mächtig unscharf. Sehr umbequem zu lesen. Zudem muss ich Beitrag 12 Recht geben. Das könnte der casus knacktus sein.
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 beispielsweise die ziemlich willkürlich ausgewählte Seite http://www.engstfeld-weiss.de/ aufrufen, mal in Firefox, mal in einem anderen Browser. Deren @font-face-Feature einer anderen Foundry funktioniert auf nahezu allen Browsern. Da fragt man sich: Warum kann die Typotheque das, aber der Fontshop nicht?
Prima, das klappt sogar in den Kommentaren (jedenfalls in der Vorschau).
schade, doch nicht :(
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 gepunktete Linie ziemlich weit nach unten.
“Web-FontFonts sind noch nicht in den Shops erhältlich, aber bald, jede Menge, auch FF Meta Web.” Endlich – da warten alle Interfacedesigner sehnsüchtig darauf! Ich bin sehr gespannt, wie die Lizenzen aussehen werden…
P.S. gibt es die Web-FontFonts auch im eot-Format (Embedded Open Type) für den Internet-Explorer?
Wie kann ich denn mit htaccess gewährleisten, dass meine mit @font-face eingebetteten Fonts (gekauft bei fontshop) vor illegalem Download geschützt sind? Könnte ich dann auch http://www.fontsquirrel.com einsetzen? Oder muss die Schrift explizit für den Einsatz im Web freigegeben sein?
Oli, auch wenn ich nicht weiß, von welchem Hersteller die von dir lizenzierte Schrift ist, kann ich mit ziemlicher Sicherheit sagen: nein, du kannst fontsquirrel nicht nutzen. Ich kenne keine über FontShop vertriebene 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 entstehenden Datei passieren. Die Schrift muss explizit in ihren Lizenzbestimmungen sowas erlauben bzw. nicht verbieten (was in der Regel durch möglichst allgemeingültige Aussagen passiert). Wie du die .htaccess konfigurierst kannst du übrigens im Web FontFont User Guide nachlesen, der in der ZIP-Datei enthalten ist.
Habe ich das Lizenzproblem richtig verstanden? Wenn ich die Fontdatei vor einem direkten Zugriff bzw. Download schütze, kann ich lizenzrechtlich nichts falsch machen?