0
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

3,633

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,633
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide





























  • Optical Character Recognition on the image












  • - We get an influx of hack solutions with equally hacky names
    - You know, where it's cool to leave out vowels
  • Around 2005 we had Scalable Inman Flash Replacement. Uses JavaScript and Flash to replace text.
  • Que-pho’, I guess? Takes a font, runs it through a proprietary generator called FontForge, which generates an SVG font, then is rendered by a 3-part render engine? Please.
  • PHP + CSS? I don’t WANT my designers messing with PHP. Security nightmare. NEXT!
  • Relies on JavaScript to “FLIR-ize” HTML. All their demos were broken on their site in Chrome, enough said.
  • SIIR... OK
  • sIFR 3! Still relying on server-side image replacement. Code is messy.
  • DTR, more strategies for replacing fonts
  • Adding .js to the end of your library apparently makes you cool, and still use JavaScript
  • IR-ERRRR, yet another IRRR library.
  • Now we’re combining DTR with PHP and CSS, sounds fun, right?
  • swifr... BORDERING ON AWESOME. Not impressed...

    Designers and font foundries thought these were awesome, well that's cause they weren't the ones implementing them


  • - Only a few are accessible, but ALL are a huge pain
  • We’re developers running into huge piles of...








  • Wait, @font-face?
  • What the heck is @font-face?
  • Pulled from the CSS3 spec

  • Regardless if it’s installed on a user’s machine
  • Well sorta. Licensing comes into play, which we talk about later



















  • So that’s @font-face, but what about browser support?
    We talked about native rendering of fonts...
    If I’ve lost you, you can start paying attention again cause now is the fun stuff
  • Anybody want to guess our IE6 usage on www.ku.edu?
    1.8 million hits, 26000 are IE6, that’s 1.5%



  • So uhh...
  • Mission Accomplished, right?
  • Well, kinda...
    Let’s get into what it is
















  • Define @font-face once, reuse font-family multiple times




  • OpenType spec says two-byte unicode characters don’t work in font names on a Mac, so lessons liklihood of a local font rendering in its place.
    You could reference a local() font which is completely different than what you think it is.



  • Chrome 6 knows it uses WOFF, so it downloads that file.























  • SVG has one, EOT has one
























  • Aesthetics are subjective. They’re traditionally a designer’s realm.
    But control is in the hands of the “non-designer” developer.








  • Transcript of "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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×