Cufon - Javascript Font Replacement

24,768 views

Published on

Published in: Technology, Art & Photos
3 Comments
5 Likes
Statistics
Notes
  • @christianmedina12 that's the Keynote file for this slide deck. If you're looking for the Cufón download, it's at http://cufon.shoqolate.com/generate/

    But please note that the state of web typography has improved considerably since this presentation three years ago. You should check out Six Revisions' Essential Guide to @font-face at http://sixrevisions.com/css/font-face-guide/ as well as these excellent sources for free, embeddable fonts:

    * http://www.google.com/webfonts/
    * http://www.fontsquirrel.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • What is: cufon-090829231818-phpapp01.key
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • xcxzv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
24,768
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
93
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide
  • Cufon - Javascript Font Replacement

    1. 1. Cufón “Fonts for the people” Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    2. 2. Web-Safe Fonts Arial / Helvetica Times (New Roman) Courier (New) These are the only fonts you can be sure a browser has. They’re good fonts, don’t get me wrong. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    3. 3. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    4. 4. Back in the ‘90s • Netscape 4 & 5 supported TrueDoc (Bitstream) embedding • Internet Explorer 4+ support Embedded OpenType (proprietary until 2007) • We thought Vanilla Ice was cool Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    5. 5. Image Replacement Web designers have cheated by creating static images with the text they need, in the font they need. Looks great, but you can’t edit the text without making a new graphic. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    6. 6. Modern Techniques Flash-based Server-side (image per text block) Canvas/SVG based Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    7. 7. Why Use Cufón? • Fast (modern JavaScript engines) • Only 2 files to download (Cufón & font) • No proprietary technology (Flash, EOT, Bitstream) Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    8. 8. How Cufón Works • Generator : http://cufon.shoqolate.com/generate/ • Coverts TrueType font to vectors • Permission to embed? You’re on your honor. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    9. 9. How Cufón Works • Include the Cufon script and the generated font <script type='text/javascript' src='http://davidmichaelross.com/wp-content/themes/ davidmichaelross/cufon-yui.js'></script> <script type='text/javascript' src='http://davidmichaelross.com/wp-content/themes/ davidmichaelross/tena_400.font.js'></script> • Tell Cufon what to replace with your font <script type="text/javascript"> Cufon.replace('h1'); </script> Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    10. 10. How Cufón Works • Uses <canvas> tag on supporting browsers • Uses VML on Internet Explorer • Renders font using vectors Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    11. 11. Cufón in action Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    12. 12. A Stopgap Font foundries are warming up to embedding CSS3 supports @font-face embedding Some day we wont need tricks like this. Someday... Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    13. 13. Until Then... Download Cufon : http://cufon.shoqolate.com Great sources for free fonts: http://www.dafont.com/ http://1001freefonts.com/ Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    14. 14. Any Questions? Dave Ross PHP & Javascript developer WordPress plugin developer http://daveross.tel http://davidmichaelross.com Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009

    ×