It’s time to kick your Cufon and sIFR habits in the nuts. Aaron is a web designer and front-end developer who loves experimenting with HTML and CSS. For those who aren’t already onboard with @font-face, he’ll explain how to get up-and-running with them quickly using the free resource, Font Squirrel. From the October 2010 Refresh Columbia Meetup: refreshcolumbia.org/​meetings/​october-2010-meetup/​

1. I'm Aaron Hall
A web designer & front-end developer
Hello!
10/27/10

2. Today, we’re going to talk about
@font-face

3. Examples are....

8. Short story about
@font-face

9. Not new to CSS3

10. Was first proposed
for CSS2

11. Been implemented in
since IE4!

12. IE loves & demands
.eot format

13. No other browsers at
that time decided to
use this .eot format
(smart move!)

14. like this...

15. Font
Directory

16. Limited font choices

17. No custom fonts

18. The fonts are dependent
on Google’s host but...

20. 100%
“free for commercial use”

21. Many nice font kits
already setup

22. Time saving
& very useful

23. and...

24. the awesome
@font-face generator

25. for your custom fonts that

26. Fontsquirrel doesn’t have

27. able to create not
only .ttf but .woff, .svg,
& .eot formats

28. and to take complete
control of the settings

29. which are...
Font formats
Font options
Subsetting
CSS formats
CSS options

30. Font format
type of file extension what it is called what it supported
.ttf TrueType Font
All browsers except
IEs and iProducts
.woff Web Open Font Format FF3.6+, IE9+, Chrome 5+
.eot Embedded Font Format IE4+
.svg Scaleable Vector Graphics iProducts

31. Font options
what are they? what does it do?
Add Hinting Improve Windows rendering
Remove Kerning Removing kerning can reduce filesize.
WebOnly™ Disable desktop use
Keep OT Features Ligatures, alt glyphs etc.
Simplifty Outlines Remove extra points (lossy)
Build Cufón File Javascript font alternative

32. Subsetting
what are they? what does it do?
Basic Subsetting Cover basic such as Lowercase, Uppercase, etc.
Custom Subsetting
More choices: Lowercase, Uppercase, Numbers,
over 33+ different languages and much more.
No Subsetting Leave as it is. Big file size.
Subsetting will remove glyphs from your
font for the purpose of reducing file size.

33. CSS formats
what are they? what does it do?
Bulletproof (Smiley) Avoids local() problems
Bulletproof (Original) Safe and compact
Mo' Bulletproofer Uses double declarations

34. CSS options
what are they? what does it do?
Style Linking Group styles under family
Base64 Encode Encode Font Within CSS

35. Check the EULA
(End User License Agreement)
Important!

36. @font-face {
font-family: 'CustomFont';
src: url('CustomFont.eot');
src: local('☺'),
url('CustomFont.woff') format('woff'),
url('CustomFont.ttf') format('truetype'),
url('CustomFont#VrleBEAV') format('svg');
}
h1 {
font: normal 25px/35px 'CustomFont', sans-serif;
}
Generated by FontSquirrel

37. <h1>@font-face is awesome!</h1>

38. <h1>@font-face is awesome!</h1>

39. @font-face is
awesome!
<h1>@font-face is awesome!</h1>

40. One more thing...

41. sifr, cufón, etc. are great for font
replacement but the best technique to
use @font-face is that they do not rely
on javascript, image replacement
or flash

42. Find this free service valuable and
want to see it grow?
Consider donating to them.

43. Questions?
See me after the meeting or
me@aaron.im
Thank you!