Webfonts in der Praxis - Teil 1 -

Webfonts in der Praxis Teil 1: Auf Fontsuche

Sylvia Egger

Ausgangspunkt

Wir brauchen Fonts ...

Welche Möglichkeiten haben wir? Gratis-Webfonts

Selbst gehosted (z.B. Font Squirrel bzw. die freie Wildbahn ...) Fremd gehosted (z.B. Google Webfonts)

Kommerzielle Webfonts Selbst gehosted (z.B. FontShop, Fontspring) Fremd gehosted (z.B.Typekit, Fonts.com)

Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 3

Gratis-Webfonts selbst gehosted

Font Squirrel und die freie Wildbahn ...

Quelle: Screenshots Font Squirrel,Webfonts.info 5

Gratis-Webfonts – Quellen Webfonts.info

Regelmäßig aktualisierte Liste von Gratis-Webfonts Font Squirrel

Über 500 Fonts Bei Auswahl achten auf: @FF – font-face Kompatibilität @font-face Generator

The League of Moveable Type Und und und ...


http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding

http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding

http://www.fontsquirrel.com/

http://www.fontsquirrel.com/

http://www.fontsquirrel.com/fontface/generator

http://www.fontsquirrel.com/fontface/generator

http://www.theleagueofmoveabletype.com/

http://www.theleagueofmoveabletype.com/

Font Squirrel: Stufiges Paket Fonts ohne @font-face Optimierung Fonts mit @font-face Optimierung (@FF-Label) Fonts mit @FF-Label liegen als Paket schon vor (@font-

face Kits) incl.Webpreview

Auch hier beachten: Lizenzbestimmung!

Bsp.: Lizenzbedingung Museo San


http://www.fontsquirrel.com/fonts/Museo-Sans

http://www.fontsquirrel.com/fonts/Museo-Sans

Font Squirrel: @font-face Kits Fertige Fonts zum

Download Subset Formatauswahl

Live-Vorschau Webvorschau minimal:

muss mit dem jeweiligen Browser genutzt werden (nur Annäherungswert)

Quelle: Screenshot Font Sqirrel @font-face Kit


Quelle: Screenshot Font Squirrel @font-face Kit Generator


Gratis-Webfontfremd gehoste

s d

Google Webfonts

Quelle: Screenshot Google font directory 11

Gratis-Webfonts – Google WebFonts ca. 20 Fonts Vorschau mit Hilfe von Font Previewer Google WebFont Loader: Javascript-Library, mit der man

den Ladevorgang feinjustieren kann. Auch für andere Font-Hoster wie Typekit nutzbar Stellt alternative CSS-Klassen wie wf-inactive zur Verfügung, um

den Defaultfall nachzubearbeiten (etwa wenn die Fonts von Google nicht geladen werden).

Alle Fonts lassen sich auch herunterladen und selbst hosten.


http://code.google.com/webfonts


http://code.google.com/webfonts/preview

http://code.google.com/webfonts/preview

http://code.google.com/intl/de/apis/webfonts/docs/webfont_loader.html

http://code.google.com/intl/de/apis/webfonts/docs/webfont_loader.html

http://code.google.com/p/googlefontdirectory/source/browse/

http://code.google.com/p/googlefontdirectory/source/browse/

Gratis-Webfonts – Google WebFonts Browsersupport

Google Chrome: version 4.249.4+ Mozilla Firefox: version: 3.5+ Apple Safari: version 3.1+ Opera: version 10.5+ Microsoft Internet Explorer: version 6+ Kein Support für iPhone, iPad, iPod oder Android




Quelle: Screenshot Google Font previewer 14

Kommerzielle Webfonts selbst gehosted

FontShop & Co.

Quelle: Screenshots FontShop Fontauswahl,Webfonts.info 16

Kommerzielle Webfonts – selbst gehostet

Bei der Fontlizenz ist darauf zu achten auf: EULA (End User Licence Agreement) Dass es Infos zum Embedding gibt

Einbindung via @font-face muss erlaubt sein. Ein Negativbeispiel von Mota Italic:

„Using our fonts in CSS with @font-face is not allowed.“ Weitere Einschränkungen beachten wie

Domain (z.B. Fontspring) Subset (z.B. Fontspring) Anzahl Besucher, Bandbreite (z.B. FontShop) Kommentar zu Lizenz und Copyright muss beibehalten werden (z.B.

Fontspring)


FontShop: Web Fonts

Quelle: Screenshot FontShop Web Fonts - Fontauswahl 18

FontShop: Fontauswahl Format = Web Lizenz: Pageview (Beachten bei Großkunden)

Quelle: Screenshot FontShop Webfonts - Fontauswahl


Kommerzielle Webfonts – selbst gehostet FontShop:Web Fonts

Über 100 weboptimierte Fonts Kennzeichen: Grafik WEB für weboptimierte Fonts Formate: WOFF und EOT (IE) Keine Unterstützung für iPhone, iPad, iPod (SVG) Vorschau der Web Fonts: FontFonter

Webfonts.info: Übersicht über kommerzielle Anbieter, die Webfonts zur

Verfügung stellen Die meisten Fonts werden über Fontspring vertrieben


http://www.fontshop.com/fontlist/n/web_fontfonts

http://www.fontshop.com/fontlist/n/web_fontfonts

http://fontfonter.com/

http://fontfonter.com/

http://www.webfonts.info/wiki/index.php?title=Commercial_foundries_which_allow_@font-face_embedding

http://www.webfonts.info/wiki/index.php?title=Commercial_foundries_which_allow_@font-face_embedding

http://www.fontspring.com/


Fontspring: Auswahl der Fonts @font-face Lizenz ist bereits angewählt Unbegrenzte Domains kann man hinzuwählen Anwählbare Optionen unterscheiden sich pro Font

Quelle: Screenshot Fontspring - Fontauswahl


Kommerzielle Webfonts – selbst gehostet Fontspring

Über 1000 Fonts (davon 52 Gratis-Webfonts) Domainabhängig, aber zu einem geringfügigen Aufpreis für alle

Domains lizenzierbar Alle Fonts sind auto-hinted – gute Rendering-Qualität

(teilweise wirklich besser als bei Typekit) Ein font-face-Paket enthält:

HTML/CSS-Datei Dateien:

WOFF TTF WebOnly (nicht desktop-fähig) EOT (IE) SVG (iPhone, iPad, iPod)




Kommerzielle Webfonts Font Hosting And Obfuscation Services (FHOS)

TypeKit & Co.

You can view FHOS as a phase. Services are innovating.

Richard Fink: Web Fonts at the Crossing

http://www.alistapart.com/articles/fonts-at-the-crossing/




Webfont-Services

Einige Beispiele

Wefont-Service: Typekit

Quelle: Screenshot Typekit – Webfont Browserpreview 26

http://typekit.com/

http://typekit.com/

Wefont-Service: Fontdeck - Auswahl

Quelle: Screenshot Fontdeck - Fontauswahl

27 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

http://fontdeck.com/


Wefont-Service: Fontdeck - Bezahlung

Quelle: Screenshot Fontdeck – Projektauswahl - Testaccount




Webfont-Service: FontsLive - Auswahl

Quelle: Screenshot FontsLive - Fontauswahl


http://www.fontslive.com/


Webfont-Service: FontsLive – Bezahlung/Account

Quelle: Screenshot FontsLive - Bezahlung

Quelle: Screenshot FontsLive - Account




Webfont-Service: fonts.com – Auswahl

Quelle: Screenshot fonts.com Webfonts - Fontauswahl


http://webfonts.fonts.com/


Webfont-Service: fonts.com – Account

Quelle: Screenshot fonts.com Webfonts - Account




Webfont-Service: Web Fonts - Kernest – Auswahl

Quelle: Screenshot Webfonts Kernest - Fontauswahl


http://kernest.com/

http://kernest.com/

Webfont-Service: Web Fonts - Kernest – Bezahlung

Quelle: Screenshot Webfonts Kernest - Bezahlung


http://kernest.com/

http://kernest.com/

Webfont-Service: WebInk– Type Drawer

Quelle: Screenshot WebInk – Vorschau der Fonts via Type Drawer


http://www.extensis.com/en/WebINK/


Webfont-Service: WebInk – Auswahl / Konfiguration

Quelle: Screenshot WebInk Konfigurierung der Bandbreite

Quelle: Screenshot WebInk – Auswahl der Font Libraries




Webfont-Services: Übersicht

Quelle: Screenshots Webfont-Services Übersicht – sprungmarker.de 37

http://sprungmarker.de/wp-content/uploads/webfont-services/

http://sprungmarker.de/wp-content/uploads/webfont-services/

Webfont-Services

Vor- und Nachteile

Webfont-Services: Vorteile Keine Lizenzprobleme (mit Ausnahmen) Größtmögliche Browserkompatibilität Große Fontauswahl (z.B.Typekit, Fonts.com) Live-Browser- und Plattform-Preview (z.B.Typekit) Einfache Handhabe Schneller Einsatz


Webfont-Services: Nachteile Fonts sind nur gemietet (gehosted)

Kosten Performance (Schriftgröße, mehrere Schriften etc.) Was macht man mit den Fonts für Print, PDF? Gibt es eine Möglichkeit, die Fonts auch selbst zu hosten?

(meist ja, teuerstes Modell – Enterprise ;)) Unterschiedlichste Kostenmodelle

Der neue Font-Gold-Rush! Teilweise zu komplexe Abhängigkeiten (Bandbreite,

Nutzerzahlen, Fontbibliotheken und dann noch pro Font)


Webfont-Services: Nachteile Fonts sind nur bedingt gut weboptimiert

Tests sind immer notwendig! Katze-im-Sack-Prinzip (z.B. Font-basierte Services wie

Fontspring) Terms of Service müssen genau gelesen werden

Wichtig bei Bandbreiten-Einschränkungen: Wie wird mit Überschreitungen umgegangen?

Wie sieht es für die Zukunft aus? Datenschutz

Jeder Service sammelt beim Aufruf Daten Wie werden diese Daten gespeichert? Gibt es dazu Informationen in den Terms of Services?


Webfont-Services: Beispiel Terms of Service

„Small Batch does not warrant that (i) the Service will meet your specific requirements, (ii) the Service will be uninterrupted, timely, secure, or error-free, (iii) the results that may be obtained from the use of the Service will be accurate or reliable, (iv) the quality of any products, services, information, or other material purchased or obtained by you through the Service will meet your expectations.“

Quelle:Typekit – Terms of Service


http://typekit.com/policies

http://typekit.com/policies

Sylvia Egger – sprungmarker.de Senior Webproducerin in Köln (brainbits.net) Die Präsentation auf Slideshare

http://www.slideshare.net/sprungmarker Twitter: @sprungmarkers


http://sprungmarker.de

http://sprungmarker.de

http://brainbits.net

http://brainbits.net

http://www.slideshare.net/sprungmarker

http://www.slideshare.net/sprungmarker

http://twitter.com/sprungmarkers




Webfonts in der Praxis - Teil 1 -

Technology

Transcript of Webfonts in der Praxis - Teil 1 -