Your SlideShare is downloading. ×
0
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Cufon - Javascript Font Replacement
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cufon - Javascript Font Replacement

23,965

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
23,965
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
91
Comments
3
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Cufón “Fonts for the people” Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    • 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. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    • 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. 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. 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. 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. 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. 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. 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. Cufón in action Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
    • 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. 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. 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

    ×