Cufón is a JavaScript font rendering library that allows web developers to use custom fonts on websites. It works by converting TrueType fonts to vector outlines that are rendered using HTML5 canvas or VML depending on the browser. Cufón generates the necessary JavaScript and font files, which just need to be included in a webpage to replace text with the custom font. While not perfect, it has provided a workaround for custom web fonts until modern techniques like CSS font-face are more widely supported. The presentation provided an overview of how Cufón works and its advantages over other font techniques.

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