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
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
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
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
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