1.
Webfonts in der Praxis
Teil 1: Auf Fontsuche
Sylvia Egger

2.
Ausgangspunkt
Wir brauchen Fonts ...

3.
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)
3 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

4.
Gratis-Webfonts
selbst gehosted
Font Squirrel und die freie Wildbahn ...

5.
5 Quelle: Screenshots Font Squirrel,Webfonts.info

6.
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 ...
6 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

7.
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
7 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

8.
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
8 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

9.
Quelle: Screenshot Font Squirrel
@font-face Kit Generator
9 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

10.
Gratis-Webfonts
fremd gehosted
Google Webfonts

11.
11 Quelle: Screenshot Google font directory

12.
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.
12 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

13.
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
13 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

14.
14 Quelle: Screenshot Google Font previewer

15.
Kommerzielle Webfonts
selbst gehosted
FontShop & Co.

16.
16 Quelle: Screenshots FontShop Fontauswahl,Webfonts.info

17.
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)
17 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

18.
FontShop: Web Fonts
18 Quelle: Screenshot FontShop Web Fonts - Fontauswahl

19.
FontShop: Fontauswahl
 Format = Web
 Lizenz: Pageview (Beachten bei Großkunden)
Quelle: Screenshot FontShop Webfonts - Fontauswahl
19 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

20.
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
20 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

21.
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
21 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

22.
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)
22 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

23.
Kommerzielle Webfonts
Font Hosting And Obfuscation Services (FHOS)
TypeKit & Co.

24.
You can view FHOS as a phase.
Services are innovating.
Richard Fink: Web Fonts at the Crossing

25.
Webfont-Services
Einige Beispiele

26.
Wefont-Service: Typekit
26 Quelle: Screenshot Typekit – Webfont Browserpreview

27.
Wefont-Service: Fontdeck - Auswahl
Quelle: Screenshot Fontdeck - Fontauswahl
27
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

28.
Wefont-Service: Fontdeck - Bezahlung
Quelle: Screenshot Fontdeck – Projektauswahl - Testaccount
28
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

29.
Webfont-Service: FontsLive - Auswahl
Quelle: Screenshot FontsLive - Fontauswahl
29
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

30.
Webfont-Service: FontsLive – Bezahlung/Account
Quelle: Screenshot FontsLive - Bezahlung
Quelle: Screenshot FontsLive - Account
30 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

31.
Webfont-Service: fonts.com – Auswahl
Quelle: Screenshot fonts.com Webfonts - Fontauswahl
31
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

32.
Webfont-Service: fonts.com – Account
Quelle: Screenshot fonts.com Webfonts - Account
32
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

33.
Webfont-Service: Web Fonts - Kernest – Auswahl
Quelle: Screenshot Webfonts Kernest - Fontauswahl
33 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

34.
Webfont-Service:
Web Fonts - Kernest – Bezahlung
Quelle: Screenshot Webfonts Kernest - Bezahlung
34 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

35.
Webfont-Service: WebInk– Type Drawer
Quelle: Screenshot WebInk – Vorschau der Fonts via Type Drawer
35
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

36.
Webfont-Service: WebInk – Auswahl / Konfiguration
Quelle: Screenshot WebInk
Konfigurierung der Bandbreite
Quelle: Screenshot WebInk – Auswahl der Font Libraries
36 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

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

38.
Webfont-Services
Vor- und Nachteile

39.
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
39 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

40.
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)
40 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

41.
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?
41 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

42.
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
42 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

43.
Sylvia Egger – sprungmarker.de
 Senior Webproducerin in Köln (brainbits.net)
 Die Präsentation auf Slideshare
http://www.slideshare.net/sprungmarker
 Twitter: @sprungmarkers
43 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010