Cufón
“Fonts for the people”
Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009

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

Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009

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

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

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

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

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

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

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

Cufón in action
Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009

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

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

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