SlideShare ist ein Scribd-Unternehmen logo
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)




 3                         Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Gratis-Webfonts
              selbst gehosted
Font Squirrel und die freie Wildbahn ...
5   Quelle: Screenshots Font Squirrel,Webfonts.info
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
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
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
Quelle: Screenshot Font Squirrel
                                         @font-face Kit Generator

9   Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Gratis-Webfonts
 fremd gehosted
     Google Webfonts
11   Quelle: Screenshot Google font directory
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
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   Quelle: Screenshot Google Font previewer
Kommerzielle Webfonts
     selbst gehosted
           FontShop & Co.
16   Quelle: Screenshots FontShop Fontauswahl,Webfonts.info
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
FontShop: Web Fonts





18       Quelle: Screenshot FontShop Web Fonts - Fontauswahl
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
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
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
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
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
Webfont-Services

      Einige Beispiele
Wefont-Service: Typekit





26        Quelle: Screenshot Typekit – Webfont Browserpreview
Wefont-Service: Fontdeck - Auswahl





Quelle: Screenshot Fontdeck - Fontauswahl





 27
                           Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Wefont-Service: Fontdeck - Bezahlung




Quelle: Screenshot Fontdeck – Projektauswahl - Testaccount





 28
                           Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Webfont-Service: FontsLive - Auswahl





Quelle: Screenshot FontsLive - Fontauswahl





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





Quelle: Screenshot FontsLive - Bezahlung





Quelle: Screenshot FontsLive - Account



 30                            Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Webfont-Service: fonts.com – Auswahl





Quelle: Screenshot fonts.com Webfonts - Fontauswahl





 31
                           Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Webfont-Service: fonts.com – Account





Quelle: Screenshot fonts.com Webfonts - Account





 32
                           Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Webfont-Service: Web Fonts - Kernest – Auswahl





Quelle: Screenshot Webfonts Kernest - Fontauswahl

 33                           Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Webfont-Service:

Web Fonts - Kernest – Bezahlung





         Quelle: Screenshot Webfonts Kernest - Bezahlung


34                  Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
Webfont-Service: WebInk– Type Drawer





Quelle: Screenshot WebInk – Vorschau der Fonts via Type Drawer


 35
                           Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010
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
Webfont-Services: Übersicht





37        Quelle: Screenshots Webfont-Services Übersicht – sprungmarker.de
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





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

Weitere ähnliche Inhalte

Ähnlich wie Webfonts in der Praxis - Teil 1 -

Persönliche Filmtipps mittels Recommender System und Chatbot
Persönliche Filmtipps mittels Recommender System und ChatbotPersönliche Filmtipps mittels Recommender System und Chatbot
Persönliche Filmtipps mittels Recommender System und Chatbot
Fabian Hardt
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
Jürg Stuker
 
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und DatenschutzBibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Jan Lüth
 
Collaboration day 2016 - IBM Watson in ihren zukünftigen Business Applikationen
Collaboration day 2016  - IBM Watson in ihren zukünftigen Business ApplikationenCollaboration day 2016  - IBM Watson in ihren zukünftigen Business Applikationen
Collaboration day 2016 - IBM Watson in ihren zukünftigen Business Applikationen
Belsoft
 
JimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeams
JimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeamsJimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeams
JimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeams
Michi Lehr
 
Web Typografie
Web TypografieWeb Typografie
Web Typografie
Felix Widmaier
 
20091203 Peters Munich Talk1
20091203 Peters Munich Talk120091203 Peters Munich Talk1
20091203 Peters Munich Talk1
Carsten Book
 
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
Verein FM Konferenz
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
Günther Haslbeck
 
JimFlow - Die Evolution von Kanban bei Jimdo
JimFlow - Die Evolution von Kanban bei JimdoJimFlow - Die Evolution von Kanban bei Jimdo
JimFlow - Die Evolution von Kanban bei Jimdo
Nadja Macht
 
State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017
frankstaude
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
Eric Eggert
 
FileMaker 14 Launch Event @ Digicomp
FileMaker 14 Launch Event @ DigicompFileMaker 14 Launch Event @ Digicomp
FileMaker 14 Launch Event @ Digicomp
Digicomp Academy AG
 
Übersicht Planung Webprojekte
Übersicht Planung WebprojekteÜbersicht Planung Webprojekte
Übersicht Planung Webprojekte
Volker Grünauer
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
Ulrich Krause
 
Video Analytics in Web Analytics
Video Analytics in Web AnalyticsVideo Analytics in Web Analytics
Video Analytics in Web Analytics
Ralf Haberich
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
Jürg Stuker
 
Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch
Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias BoschDer Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch
Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch
OPITZ CONSULTING Deutschland
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 

Ähnlich wie Webfonts in der Praxis - Teil 1 - (20)

Persönliche Filmtipps mittels Recommender System und Chatbot
Persönliche Filmtipps mittels Recommender System und ChatbotPersönliche Filmtipps mittels Recommender System und Chatbot
Persönliche Filmtipps mittels Recommender System und Chatbot
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
 
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und DatenschutzBibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
Bibliotheken im Spannungsfeld zwischen Nutzungsmessung und Datenschutz
 
Collaboration day 2016 - IBM Watson in ihren zukünftigen Business Applikationen
Collaboration day 2016  - IBM Watson in ihren zukünftigen Business ApplikationenCollaboration day 2016  - IBM Watson in ihren zukünftigen Business Applikationen
Collaboration day 2016 - IBM Watson in ihren zukünftigen Business Applikationen
 
JimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeams
JimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeamsJimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeams
JimFlow - Die Evolution von Kanban bei Jimdo @ Tools4AgileTeams
 
Web Typografie
Web TypografieWeb Typografie
Web Typografie
 
20091203 Peters Munich Talk1
20091203 Peters Munich Talk120091203 Peters Munich Talk1
20091203 Peters Munich Talk1
 
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
JimFlow - Die Evolution von Kanban bei Jimdo
JimFlow - Die Evolution von Kanban bei JimdoJimFlow - Die Evolution von Kanban bei Jimdo
JimFlow - Die Evolution von Kanban bei Jimdo
 
State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
FileMaker 14 Launch Event @ Digicomp
FileMaker 14 Launch Event @ DigicompFileMaker 14 Launch Event @ Digicomp
FileMaker 14 Launch Event @ Digicomp
 
Übersicht Planung Webprojekte
Übersicht Planung WebprojekteÜbersicht Planung Webprojekte
Übersicht Planung Webprojekte
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 
Video Analytics in Web Analytics
Video Analytics in Web AnalyticsVideo Analytics in Web Analytics
Video Analytics in Web Analytics
 
Top 10 Internet Trends 2008
Top 10 Internet Trends 2008Top 10 Internet Trends 2008
Top 10 Internet Trends 2008
 
Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch
Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias BoschDer Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch
Der Browser als App-Plattform - Mobile DevCon 2011 - Tobias Bosch
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 

Webfonts in der Praxis - Teil 1 -

  • 1. Webfonts in der Praxis Teil 1: Auf Fontsuche Sylvia Egger
  • 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
  • 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