Cufon - Javascript Font Replacement

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

2. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
Arial / Helvetica
Times (New Roman)
Courier (New)Web-Safe Fonts
These are the only fonts you can be sure
a browser has.
They’re good fonts, don’t get me wrong.

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

4. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
•Netscape 4 & 5 supported
TrueDoc (Bitstream) embedding
•Internet Explorer 4+
support Embedded OpenType
(proprietary until 2007)
•We thought Vanilla Ice was coolBack in the ‘90s

5. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009Image 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.

6. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009Today
Flash-based
Server-side (image per text block)
Canvas/SVG based

7. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
•Fast (modern JavaScript engines)
•Only 2 files to download (Cufón & font)
•No proprietary technology (Flash, EOT, Bitstream)Why Cufón?

8. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
•Generator : http://cufon.shoqolate.com/generate/
•Coverts TrueType font to vectors
•Permission to embed? You’re on your honor.How Cufón?

9. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
•Include the Cufon script and the generated fontHow Cufón?
<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>
<script type="text/javascript">
Cufon.replace('h1');
</script>
•Tell Cufon what to replace with your font

10. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
•Uses <canvas> tag on supporting browsers
•Uses VML on Internet Explorer
•Renders font using vectorsHow Cufón?

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

12. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
Font foundries are warming up to embedding
CSS3 supports @font-face embedding
Some day we wont need tricks like this.
Someday...A Stopgap

13. Dave Ross :: Suburban Chicago PHP & Web Development Meetup :: suburbanchicagophp.org :: Sept 4, 2009
Dave RossAny Questions?
http://daveross.tel
http://davidmichaelross.com
PHP & Javascript developer
WordPress plugin developer