Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Beyond Arial
Using @font-face to unleash web typography



John Kary | johnkary@ku.edu
Web Development & Interface Design
...
History
Using @font-face
Website Demo
Challenges
History
History – 1996
            Microsoft introduces “Core Fonts for the Web”




Source: http://en.wikipedia.org/wiki/Core_fon...
History – 1996
            Microsoft introduces “Core Fonts for the Web”
                   Highly legible on screen




S...
History – 1996
            Microsoft introduces “Core Fonts for the Web”
                   Highly legible on screen
     ...
History – 1996
            Microsoft introduces “Core Fonts for the Web”
                   Highly legible on screen
     ...
History – 1996




Andale Mono
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Arial
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Comic Sans MS
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Courier New
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Georgia
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Impact
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Times New Roman
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Trebuchet MS
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Verdana
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996




Webdings
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
History – 1996
           CSS1 is introduced by W3C




Source: http://www.w3.org/TR/REC-CSS1/
History – 1996
           CSS1 is introduced by W3C



                Setting font properties will be among the
         ...
History – 1996
           CSS1 is introduced by W3C



                Setting font properties will be among the
         ...
History – 1996
History – 1997
           Microsoft introduces Web Embedding Fonts Tool (WEFT)




Source: http://www.microsoft.com/typogr...
History – 1997
           Microsoft introduces Web Embedding Fonts Tool (WEFT)
           TrueType Font (.ttf) => WEFT => ...
History – 1997
           Microsoft introduces Web Embedding Fonts Tool (WEFT)
           TrueType Font (.ttf) => WEFT => ...
History – 1997
           Netscape 4 supports TrueDoc by Bitstream




Source: http://www.microsoft.com/typography/web/emb...
History – 1997
           Netscape 4 supports TrueDoc by Bitstream
           Discontinued with Netscape 6




Source: htt...
History – 1997
           Netscape 4 supports TrueDoc by Bitstream
           Discontinued with Netscape 6
               ...
History – 1997
           Netscape 4 supports TrueDoc by Bitstream
           Discontinued with Netscape 6
               ...
History – 1997
           Netscape 4 supports TrueDoc by Bitstream
           Discontinued with Netscape 6
               ...
WhatTheFont




Source: http://new.myfonts.com/WhatTheFont/
Source: http://new.myfonts.com/WhatTheFont/iPhone/
History – 1998
           First draft of CSS2 is introduced by W3C




Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.h...
History – 1998
           First draft of CSS2 is introduced by W3C
           First mentions of @font-face appear!




Sou...
History – 1998
           First draft of CSS2 is introduced by W3C
           First mentions of @font-face appear!
       ...
History – 2000
           First CSS3 intro provided by W3C
           Intend to support @font-face




Source: http://www....
History – Zzzzzz
  Browser vendors never come to a format consensus
History – Zzzzzz
  Browser vendors never come to a format consensus
  Web fonts fizzzzzzzzle...
History – Web 2.0
History – Web 2.0
  Resurgence in web typography
History – Web 2.0
  Resurgence in web typography
  All the hip kids are using Prototype and jQuery
History – Web 2.0
  Resurgence in web typography
  All the hip kids are using Prototype and jQuery
  JavaScript is now the...
History – Web 2.0
  Resurgence in web typography
  All the hip kids are using Prototype and jQuery
  JavaScript is now the...
History – Web 2.0
  Resurgence in web typography
  All the hip kids are using Prototype and jQuery
  JavaScript is now the...
History – Web 2.0
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0




Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Last few years...
History – Last few years...
CSS3 Font module is currently a medium priority by W3C




Source: http://www.w3.org/Style/CSS...
History – Last few years...
CSS3 Font module is currently a medium priority by W3C




Source: http://www.w3.org/Style/CSS...
History – Last few years...
CSS3 Font module is currently a medium priority by W3C


                                     ...
History – Present
History – Present

              HTML5
History – Present

              HTML5



               CSS3
History – Present

              HTML5

       @font-face
               CSS3
@font-face
@font-face?
@font-face rule allows for linking to fonts that are
automatically activated when needed.

This permits authors to work ar...
@font-face
@font-face
  Use any font* you want on your website
@font-face
  Use any font* you want on your website
    * Any font you have the license to use...
@font-face
  Use any font* you want on your website
    * Any font you have the license to use...
  Relies on browser’s na...
@font-face
  Use any font* you want on your website
    * Any font you have the license to use...
  Relies on browser’s na...
@font-face – The Bad News
@font-face – The Bad News
  Relies on browser’s native font rendering
@font-face – The Bad News
  Relies on browser’s native font rendering
  Inherit all problems of inconsistent font-rendering
@font-face – The Bad News
  Relies on browser’s native font rendering
  Inherit all problems of inconsistent font-renderin...
@font-face – The Bad News
  Relies on browser’s native font rendering
  Inherit all problems of inconsistent font-renderin...
@font-face – The Bad News
  Relies on browser’s native font rendering
  Inherit all problems of inconsistent font-renderin...
@font-face – The Good News
@font-face – The Good News
  Relies on browser’s native font rendering
@font-face – The Good News
  Relies on browser’s native font rendering
  Users can copy/paste your text
@font-face – The Good News
  Relies on browser’s native font rendering
  Users can copy/paste your text
  Text is natively...
@font-face – The Good News
  Relies on browser’s native font rendering
  Users can copy/paste your text
  Text is natively...
@font-face – The Good News
  No more reliance on JavaScript, let alone Flash
@font-face – The Good News
  No more reliance on JavaScript, let alone Flash
  Syntax is straight-forward and not hacky
@font-face – The Good News
  No more reliance on JavaScript, let alone Flash
  Syntax is straight-forward and not hacky
  ...
@font-face – The Good News
  No more reliance on JavaScript, let alone Flash
  Syntax is straight-forward and not hacky
  ...
@font-face – The Good News
  No more reliance on JavaScript, let alone Flash
  Syntax is straight-forward and not hacky
  ...
@font-face – The Good News
@font-face
@font-face – Browser Support
@font-face – Browser Support




Source: http://webfonts.info/wiki/index.php?title=Browser_support
Source: Google Analytic...
97.6%
97.6%
Kinda...
@font-face – Font Formats
  This gets a little ugly...
@font-face – Font Formats
  This gets a little ugly...
  Currently 5 major formats
@font-face – Font Formats
  This gets a little ugly...
  Currently 5 major formats
    OTF – OpenType Font
@font-face – Font Formats
  This gets a little ugly...
  Currently 5 major formats
    OTF – OpenType Font
    TTF – TrueT...
@font-face – Font Formats
  This gets a little ugly...
  Currently 5 major formats
    OTF – OpenType Font
    TTF – TrueT...
@font-face – Font Formats
  This gets a little ugly...
  Currently 5 major formats
    OTF – OpenType Font
    TTF – TrueT...
@font-face – Font Formats
  This gets a little ugly...
  Currently 5 major formats
    OTF – OpenType Font
    TTF – TrueT...
@font-face – Font Format Support by Browsers
@font-face – Font Format Support by Browsers




Source: http://webfonts.info/wiki/index.php?title=Browser_support
So, which browser?
So, which browser?

  Which format?
ALL of them!
     (Almost)
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax




Prevents local font of same name from rendering
@font-face – Syntax
@font-face – Syntax




Internet Explorer 6, 7, 8 are dumb
@font-face – Syntax
@font-face – Syntax




                 Load WOFF, TTF, SVG
Other browsers are smart enough to use the font they need
I thought you said
   this was easy?
@font-face – Syntax
@font-face generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
Could this be even easier?
http://code.google.com/webfonts
http://code.google.com/webfonts
http://code.google.com/webfonts
http://code.google.com/webfonts
http://code.google.com/webfonts
Website Demo
KU Internal Audit – Before
KU Internal Audit – After
Challenges
Challenges – MIME types
Challenges – MIME types
  Chrome & Safari inspector will throw some errors...
Challenges – MIME types
  Chrome & Safari inspector will throw some errors...
Challenges – MIME types
  Chrome & Safari inspector will throw some errors...
Challenges – MIME types
           Chrome & Safari inspector will throw some errors...




           No web browser MIME ...
Challenges – MIME types
            Firefox doesn't even consider MIME-type on fonts




Source: https://developer.mozilla...
Challenges – MIME types
            Firefox doesn't even consider MIME-type on fonts




Source: https://developer.mozilla...
Challenges – MIME types
            Even though there’s no MIME-type, don’t leave it up to the browser




Source: http://...
Challenges – MIME types
            Even though there’s no MIME-type, don’t leave it up to the browser
            Remembe...
Challenges – MIME types
            Even though there’s no MIME-type, don’t leave it up to the browser
            Remembe...
Challenges – FOUC!
Challenges – FOUC!
            Flash Of Unstyled Content




Source: http://stackoverflow.com/questions/3594823/mime-type-f...
Challenges – FOUC!
            Flash Of Unstyled Content
            If we don't set styles before the DOM starts loading ...
Challenges – FOUC!
            Flash Of Unstyled Content
            If we don't set styles before the DOM starts loading ...
Challenges – FOUC!
            Flash Of Unstyled Content
            If we don't set styles before the DOM starts loading ...
Challenges – Licensing
Challenges – Licensing
            Not all fonts licensed for web usage




Source: http://acko.net/blog/moving-towards-vo...
Challenges – Licensing
            Not all fonts licensed for web usage
            But font foundries have no real way to...
Challenges – Licensing
            Not all fonts licensed for web usage
            But font foundries have no real way to...
Challenges – Licensing
            Not all fonts licensed for web usage
            But font foundries have no real way to...
Challenges – Licensing
            Not all fonts licensed for web usage
            But font foundries have no real way to...
Challenges – Licensing
            Not all fonts licensed for web usage
            But font foundries have no real way to...
Challenges – Licensing
  Plenty of Free Font resources to choose from
Challenges – Licensing
  Plenty of Free Font resources to choose from
    http://www.fontsquirrel.com
    http://www.openf...
Challenges – Font Piracy
Challenges – Font Piracy
  Critics say @font-face encourages font piracy
Challenges – Font Piracy
  Critics say @font-face encourages font piracy
  Well, all my work is freely available on www.ku...
Challenges – Font Piracy
  Critics say @font-face encourages font piracy
  Well, all my work is freely available on www.ku...
Challenges – Font Piracy
  Critics say @font-face encourages font piracy
  Well, all my work is freely available on www.ku...
Challenges – Aesthetics
Challenges – Aesthetics
  @font-face is easy to implement, it’s copy/paste
Challenges – Aesthetics
  @font-face is easy to implement, it’s copy/paste
  Yields easy abuse
Challenges – Aesthetics
  @font-face is easy to implement, it’s copy/paste
  Yields easy abuse
  Comic Sans?
Challenges – Aesthetics
  @font-face is easy to implement, it’s copy/paste
  Yields easy abuse
  Comic Sans?
Challenges – Aesthetics
  Read up on web typography
Challenges – Aesthetics
  Read up on web typography
  http://webtypography.net/intro/
Challenges – Aesthetics
  Read up on web typography
  http://webtypography.net/intro/
Questions?


Source: http://xkcd.com/590/
Using @font-face to unleash web typography
Using @font-face to unleash web typography
Upcoming SlideShare
Loading in …5
×

Using @font-face to unleash web typography

4,315 views

Published on

Beyond Arial: Using @font-face to unleash web typography. Contains current best practices advice on using @font-face, history of fonts on the web, browser support and font format support and challenges of @font-face.

Video of this talk: http://vimeo.com/15402487

Published in: Technology
  • Be the first to comment

Using @font-face to unleash web typography

  1. 1. Beyond Arial Using @font-face to unleash web typography John Kary | johnkary@ku.edu Web Development & Interface Design University of Kansas, Information Technology September 2010 KU Web Developers Meeting
  2. 2. History Using @font-face Website Demo Challenges
  3. 3. History
  4. 4. History – 1996 Microsoft introduces “Core Fonts for the Web” Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  5. 5. History – 1996 Microsoft introduces “Core Fonts for the Web” Highly legible on screen Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  6. 6. History – 1996 Microsoft introduces “Core Fonts for the Web” Highly legible on screen Offer a wide range of types styles in a few typefaces Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  7. 7. History – 1996 Microsoft introduces “Core Fonts for the Web” Highly legible on screen Offer a wide range of types styles in a few typefaces Support extensive internationalization Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  8. 8. History – 1996 Andale Mono Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  9. 9. History – 1996 Arial Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  10. 10. History – 1996 Comic Sans MS Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  11. 11. History – 1996 Courier New Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  12. 12. History – 1996 Georgia Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  13. 13. History – 1996 Impact Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  14. 14. History – 1996 Times New Roman Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  15. 15. History – 1996 Trebuchet MS Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  16. 16. History – 1996 Verdana Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  17. 17. History – 1996 Webdings Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  18. 18. History – 1996 CSS1 is introduced by W3C Source: http://www.w3.org/TR/REC-CSS1/
  19. 19. History – 1996 CSS1 is introduced by W3C Setting font properties will be among the most common uses of style sheets. W3C Cascading Style Sheets, level 1. 5.2 Font properties. http://www.w3.org/TR/REC-CSS1/#font-properties Source: http://www.w3.org/TR/REC-CSS1/
  20. 20. History – 1996 CSS1 is introduced by W3C Setting font properties will be among the most common uses of style sheets. W3C Cascading Style Sheets, level 1. 5.2 Font properties. http://www.w3.org/TR/REC-CSS1/#font-properties But everyone still going crazy with Netscape’s <font> tags... Source: http://www.w3.org/TR/REC-CSS1/
  21. 21. History – 1996
  22. 22. History – 1997 Microsoft introduces Web Embedding Fonts Tool (WEFT) Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  23. 23. History – 1997 Microsoft introduces Web Embedding Fonts Tool (WEFT) TrueType Font (.ttf) => WEFT => Embedded OpenType (.eot) Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  24. 24. History – 1997 Microsoft introduces Web Embedding Fonts Tool (WEFT) TrueType Font (.ttf) => WEFT => Embedded OpenType (.eot) Internet Explorer 4+ supports it! Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  25. 25. History – 1997 Netscape 4 supports TrueDoc by Bitstream Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  26. 26. History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  27. 27. History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Netscape 6 based on Mozilla, which was open-source Bitstream wouldn’t allow release of its source code Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  28. 28. History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Netscape 6 based on Mozilla, which was open-source Bitstream wouldn’t allow release of its source code TrueDoc didn’t kill Bitstream... Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  29. 29. History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Netscape 6 based on Mozilla, which was open-source Bitstream wouldn’t allow release of its source code TrueDoc didn’t kill Bitstream... WhatTheFont Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool
  30. 30. WhatTheFont Source: http://new.myfonts.com/WhatTheFont/ Source: http://new.myfonts.com/WhatTheFont/iPhone/
  31. 31. History – 1998 First draft of CSS2 is introduced by W3C Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1 Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html
  32. 32. History – 1998 First draft of CSS2 is introduced by W3C First mentions of @font-face appear! Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1 Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html
  33. 33. History – 1998 First draft of CSS2 is introduced by W3C First mentions of @font-face appear! But disappear in CSS2.1 spec... :( Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1 Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html
  34. 34. History – 2000 First CSS3 intro provided by W3C Intend to support @font-face Source: http://www.w3.org/TR/2000/WD-css3-roadmap-20000414
  35. 35. History – Zzzzzz Browser vendors never come to a format consensus
  36. 36. History – Zzzzzz Browser vendors never come to a format consensus Web fonts fizzzzzzzzle...
  37. 37. History – Web 2.0
  38. 38. History – Web 2.0 Resurgence in web typography
  39. 39. History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery
  40. 40. History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery JavaScript is now the cool kid
  41. 41. History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery JavaScript is now the cool kid Let’s use it for everything!
  42. 42. History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery JavaScript is now the cool kid Let’s use it for everything! Instead of awesome, we get...
  43. 43. History – Web 2.0
  44. 44. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  45. 45. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  46. 46. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  47. 47. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  48. 48. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  49. 49. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  50. 50. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  51. 51. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  52. 52. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  53. 53. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  54. 54. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  55. 55. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  56. 56. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  57. 57. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  58. 58. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  59. 59. History – Last few years...
  60. 60. History – Last few years... CSS3 Font module is currently a medium priority by W3C Source: http://www.w3.org/Style/CSS/current-work Source: http://www.w3.org/Style/CSS/Specs/All#fonts
  61. 61. History – Last few years... CSS3 Font module is currently a medium priority by W3C Source: http://www.w3.org/Style/CSS/current-work Source: http://www.w3.org/Style/CSS/Specs/All#fonts
  62. 62. History – Last few years... CSS3 Font module is currently a medium priority by W3C Intend to support @font-face Follow CSS3 http://www.w3.org/Style/CSS/current-work Follow Fonts module http://www.w3.org/Style/CSS/Specs/All#fonts Source: http://www.w3.org/Style/CSS/current-work Source: http://www.w3.org/Style/CSS/Specs/All#fonts
  63. 63. History – Present
  64. 64. History – Present HTML5
  65. 65. History – Present HTML5 CSS3
  66. 66. History – Present HTML5 @font-face CSS3
  67. 67. @font-face
  68. 68. @font-face?
  69. 69. @font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of "web-safe" fonts [...] allowing for consistent rendering independent of the fonts available in a given user's environment. CSS Fonts Module Level 3. 4.1 The @font-face rule. http://www.w3.org/TR/2009/WD-css3-fonts-20090618/#font-resources
  70. 70. @font-face
  71. 71. @font-face Use any font* you want on your website
  72. 72. @font-face Use any font* you want on your website * Any font you have the license to use...
  73. 73. @font-face Use any font* you want on your website * Any font you have the license to use... Relies on browser’s native font rendering
  74. 74. @font-face Use any font* you want on your website * Any font you have the license to use... Relies on browser’s native font rendering Good and Bad News...
  75. 75. @font-face – The Bad News
  76. 76. @font-face – The Bad News Relies on browser’s native font rendering
  77. 77. @font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering
  78. 78. @font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size
  79. 79. @font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size Aliasing
  80. 80. @font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size Aliasing Easy to abuse
  81. 81. @font-face – The Good News
  82. 82. @font-face – The Good News Relies on browser’s native font rendering
  83. 83. @font-face – The Good News Relies on browser’s native font rendering Users can copy/paste your text
  84. 84. @font-face – The Good News Relies on browser’s native font rendering Users can copy/paste your text Text is natively visible to search-engines
  85. 85. @font-face – The Good News Relies on browser’s native font rendering Users can copy/paste your text Text is natively visible to search-engines More SEO-friendly <h1> <h2> tags
  86. 86. @font-face – The Good News No more reliance on JavaScript, let alone Flash
  87. 87. @font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky
  88. 88. @font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky OK, not hacky compared to sIFR and that junk
  89. 89. @font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky OK, not hacky compared to sIFR and that junk And maybe best of all...
  90. 90. @font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky OK, not hacky compared to sIFR and that junk And maybe best of all... Print stylesheets work!
  91. 91. @font-face – The Good News
  92. 92. @font-face
  93. 93. @font-face – Browser Support
  94. 94. @font-face – Browser Support Source: http://webfonts.info/wiki/index.php?title=Browser_support Source: Google Analytics (Sept 1-23, 2010, Referenced Sept 23, 2010)
  95. 95. 97.6%
  96. 96. 97.6%
  97. 97. Kinda...
  98. 98. @font-face – Font Formats This gets a little ugly...
  99. 99. @font-face – Font Formats This gets a little ugly... Currently 5 major formats
  100. 100. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font
  101. 101. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font
  102. 102. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font SVG – Scalable Vector Graphic
  103. 103. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font SVG – Scalable Vector Graphic EOT - Embedded OpenType
  104. 104. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font SVG – Scalable Vector Graphic EOT - Embedded OpenType WOFF – Web Open Font Format
  105. 105. @font-face – Font Format Support by Browsers
  106. 106. @font-face – Font Format Support by Browsers Source: http://webfonts.info/wiki/index.php?title=Browser_support
  107. 107. So, which browser?
  108. 108. So, which browser? Which format?
  109. 109. ALL of them! (Almost)
  110. 110. @font-face – Syntax
  111. 111. @font-face – Syntax
  112. 112. @font-face – Syntax
  113. 113. @font-face – Syntax
  114. 114. @font-face – Syntax
  115. 115. @font-face – Syntax
  116. 116. @font-face – Syntax
  117. 117. @font-face – Syntax
  118. 118. @font-face – Syntax Prevents local font of same name from rendering
  119. 119. @font-face – Syntax
  120. 120. @font-face – Syntax Internet Explorer 6, 7, 8 are dumb
  121. 121. @font-face – Syntax
  122. 122. @font-face – Syntax Load WOFF, TTF, SVG Other browsers are smart enough to use the font they need
  123. 123. I thought you said this was easy?
  124. 124. @font-face – Syntax
  125. 125. @font-face generator
  126. 126. http://www.fontsquirrel.com/fontface/generator
  127. 127. http://www.fontsquirrel.com/fontface/generator
  128. 128. http://www.fontsquirrel.com/fontface/generator
  129. 129. http://www.fontsquirrel.com/fontface/generator
  130. 130. http://www.fontsquirrel.com/fontface/generator
  131. 131. http://www.fontsquirrel.com/fontface/generator
  132. 132. Could this be even easier?
  133. 133. http://code.google.com/webfonts
  134. 134. http://code.google.com/webfonts
  135. 135. http://code.google.com/webfonts
  136. 136. http://code.google.com/webfonts
  137. 137. http://code.google.com/webfonts
  138. 138. Website Demo
  139. 139. KU Internal Audit – Before
  140. 140. KU Internal Audit – After
  141. 141. Challenges
  142. 142. Challenges – MIME types
  143. 143. Challenges – MIME types Chrome & Safari inspector will throw some errors...
  144. 144. Challenges – MIME types Chrome & Safari inspector will throw some errors...
  145. 145. Challenges – MIME types Chrome & Safari inspector will throw some errors...
  146. 146. Challenges – MIME types Chrome & Safari inspector will throw some errors... No web browser MIME type definition for WOFF, TTF, OTF Source: http://lists.kde.org/?l=kde-core-devel&m=102236005106158&w=2
  147. 147. Challenges – MIME types Firefox doesn't even consider MIME-type on fonts Source: https://developer.mozilla.org/en/CSS/@font-face
  148. 148. Challenges – MIME types Firefox doesn't even consider MIME-type on fonts Source: https://developer.mozilla.org/en/CSS/@font-face
  149. 149. Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  150. 150. Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Remember, browsers are dumb Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  151. 151. Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Remember, browsers are dumb Add these to .htaccess Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  152. 152. Challenges – FOUC!
  153. 153. Challenges – FOUC! Flash Of Unstyled Content Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  154. 154. Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  155. 155. Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Place CSS in <head> Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  156. 156. Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Place CSS in <head> <!--set var="mycss" --> <!--set var="pagecss" --> Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  157. 157. Challenges – Licensing
  158. 158. Challenges – Licensing Not all fonts licensed for web usage Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts
  159. 159. Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts
  160. 160. Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts
  161. 161. Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Could use a font from your font folio... Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts
  162. 162. Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Could use a font from your font folio... You could also go download a movie from The Pirate Bay... Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts
  163. 163. Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Could use a font from your font folio... You could also go download a movie from The Pirate Bay... Both are illegal Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts
  164. 164. Challenges – Licensing Plenty of Free Font resources to choose from
  165. 165. Challenges – Licensing Plenty of Free Font resources to choose from http://www.fontsquirrel.com http://www.openfontlibrary.org http://code.google.com/webfonts
  166. 166. Challenges – Font Piracy
  167. 167. Challenges – Font Piracy Critics say @font-face encourages font piracy
  168. 168. Challenges – Font Piracy Critics say @font-face encourages font piracy Well, all my work is freely available on www.ku.edu
  169. 169. Challenges – Font Piracy Critics say @font-face encourages font piracy Well, all my work is freely available on www.ku.edu I even host some of my personal code on github.com/johnkary
  170. 170. Challenges – Font Piracy Critics say @font-face encourages font piracy Well, all my work is freely available on www.ku.edu I even host some of my personal code on github.com/johnkary I still have a job...
  171. 171. Challenges – Aesthetics
  172. 172. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste
  173. 173. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse
  174. 174. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse Comic Sans?
  175. 175. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse Comic Sans?
  176. 176. Challenges – Aesthetics Read up on web typography
  177. 177. Challenges – Aesthetics Read up on web typography http://webtypography.net/intro/
  178. 178. Challenges – Aesthetics Read up on web typography http://webtypography.net/intro/
  179. 179. Questions? Source: http://xkcd.com/590/

×