webfonts in der praxis - teil 1 -
DESCRIPTION
indoor presentation - 2.09. 2010 - PDF-file is not yet fully accessibleTRANSCRIPT
![Page 1: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/1.jpg)
Webfonts in der Praxis Teil 1: Auf Fontsuche
Sylvia Egger
![Page 2: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/2.jpg)
Ausgangspunkt
Wir brauchen Fonts ...
![Page 3: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/3.jpg)
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
![Page 4: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/4.jpg)
Gratis-Webfonts selbst gehosted
Font Squirrel und die freie Wildbahn ...
![Page 5: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/5.jpg)
Quelle: Screenshots Font Squirrel,Webfonts.info 5
![Page 6: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/6.jpg)
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 ...
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 6
![Page 7: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/7.jpg)
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
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 7
![Page 8: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/8.jpg)
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
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 8
![Page 9: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/9.jpg)
Quelle: Screenshot Font Squirrel @font-face Kit Generator
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 9
![Page 10: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/10.jpg)
Gratis-Webfontfremd gehoste
s d
Google Webfonts
![Page 11: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/11.jpg)
Quelle: Screenshot Google font directory 11
![Page 12: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/12.jpg)
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.
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 12
![Page 13: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/13.jpg)
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
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 13
![Page 14: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/14.jpg)
Quelle: Screenshot Google Font previewer 14
![Page 15: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/15.jpg)
Kommerzielle Webfonts selbst gehosted
FontShop & Co.
![Page 16: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/16.jpg)
Quelle: Screenshots FontShop Fontauswahl,Webfonts.info 16
![Page 17: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/17.jpg)
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)
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 17
![Page 18: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/18.jpg)
FontShop: Web Fonts
Quelle: Screenshot FontShop Web Fonts - Fontauswahl 18
![Page 19: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/19.jpg)
FontShop: Fontauswahl Format = Web Lizenz: Pageview (Beachten bei Großkunden)
Quelle: Screenshot FontShop Webfonts - Fontauswahl
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 19
![Page 20: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/20.jpg)
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
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 20
![Page 21: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/21.jpg)
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
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 21
![Page 22: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/22.jpg)
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)
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 22
![Page 23: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/23.jpg)
Kommerzielle Webfonts Font Hosting And Obfuscation Services (FHOS)
TypeKit & Co.
![Page 24: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/24.jpg)
You can view FHOS as a phase. Services are innovating.
Richard Fink: Web Fonts at the Crossing
![Page 25: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/25.jpg)
Webfont-Services
Einige Beispiele
![Page 26: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/26.jpg)
Wefont-Service: Typekit
Quelle: Screenshot Typekit – Webfont Browserpreview 26
![Page 27: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/27.jpg)
Wefont-Service: Fontdeck - Auswahl
Quelle: Screenshot Fontdeck - Fontauswahl
27 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
![Page 28: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/28.jpg)
Wefont-Service: Fontdeck - Bezahlung
Quelle: Screenshot Fontdeck – Projektauswahl - Testaccount
28 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
![Page 29: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/29.jpg)
Webfont-Service: FontsLive - Auswahl
Quelle: Screenshot FontsLive - Fontauswahl
29 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
![Page 30: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/30.jpg)
Webfont-Service: FontsLive – Bezahlung/Account
Quelle: Screenshot FontsLive - Bezahlung
Quelle: Screenshot FontsLive - Account
30 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
![Page 31: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/31.jpg)
Webfont-Service: fonts.com – Auswahl
Quelle: Screenshot fonts.com Webfonts - Fontauswahl
31 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
![Page 32: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/32.jpg)
Webfont-Service: fonts.com – Account
Quelle: Screenshot fonts.com Webfonts - Account
32 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
![Page 33: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/33.jpg)
Webfont-Service: Web Fonts - Kernest – Auswahl
Quelle: Screenshot Webfonts Kernest - Fontauswahl
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 33
![Page 34: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/34.jpg)
Webfont-Service: Web Fonts - Kernest – Bezahlung
Quelle: Screenshot Webfonts Kernest - Bezahlung
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 34
![Page 35: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/35.jpg)
Webfont-Service: WebInk– Type Drawer
Quelle: Screenshot WebInk – Vorschau der Fonts via Type Drawer
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 35
![Page 36: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/36.jpg)
Webfont-Service: WebInk – Auswahl / Konfiguration
Quelle: Screenshot WebInk Konfigurierung der Bandbreite
Quelle: Screenshot WebInk – Auswahl der Font Libraries
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 36
![Page 37: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/37.jpg)
Webfont-Services: Übersicht
Quelle: Screenshots Webfont-Services Übersicht – sprungmarker.de 37
![Page 38: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/38.jpg)
Webfont-Services
Vor- und Nachteile
![Page 39: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/39.jpg)
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
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 39
![Page 40: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/40.jpg)
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)
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 40
![Page 41: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/41.jpg)
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?
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 41
![Page 42: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/42.jpg)
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
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 42
![Page 43: Webfonts in der Praxis - Teil 1 -](https://reader033.vdocuments.pub/reader033/viewer/2022051610/5488f855b47959d30c8b5850/html5/thumbnails/43.jpg)
Sylvia Egger – sprungmarker.de Senior Webproducerin in Köln (brainbits.net) Die Präsentation auf Slideshare
http://www.slideshare.net/sprungmarker Twitter: @sprungmarkers
Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010 43