So kannst Du den ersten .woff-Font testen
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 …
23 Kommentare
Kommentarfunktion ist deaktiviert.
<em>kursiv</em> <strong>fett</strong> <blockquote>Zitat</blockquote>
<a href="http://www…">Link</a> <img src="http://bildadresse.jpg">
Dennis
Achja, Chrome zeigt mir auch eine andere Typo.
Michael Müller-Hillebrand
Leider verstößt die Einbettung hier gegen die Lizenzbedingungen, Details per Mail.
Georg
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.
Martin
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.
Jürgen Siebert
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.
Martin
Super, Danke.
Michael Müller-Hillebrand
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…
Simon
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
Thomas Maier
FAIL. webfonts gehen in allen browsern. ;)
Martin
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!
BAR M Grafikdesign
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.
Michael Müller-Hillebrand
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.)
Marc
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.
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 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?
Max
Prima, das klappt sogar in den Kommentaren (jedenfalls in der Vorschau).
Max
schade, doch nicht :(
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 gepunktete Linie ziemlich weit nach unten.
Markus Dermietzel
„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…
Markus Dermietzel
P.S. gibt es die Web-FontFonts auch im eot-Format (Embedded Open Type) für den Internet-Explorer?
Oli
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?
Ivo
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.
Stefan
Habe ich das Lizenzproblem richtig verstanden? Wenn ich die Fontdatei vor einem direkten Zugriff bzw. Download schütze, kann ich lizenzrechtlich nichts falsch machen?
Angelo
Ganz mein Meinung