Type on the web has evolved significantly over time as designers and developers have fought to overcome limitations on web fonts. This presentation provides a brief history of different techniques that have been used over the years to get around these obstacles, including image replacement and sIFR, before getting in-depth with @font-face. Presented to Webuquerque on May 4, 2011.

1. THE CHANGING FACE OF
web typography
#webqtype

2. JANUARY 2010
“Type in HTML is limited to what the
user has installed on his/her computer”
“You don’t have a lot of
fonts to choose from”

3. I WAS WRONG

4. I WAS WRONG
a lot has changed since then

5. IN THE BEGINNING
(or very near it)

6. EARLY HTML TYPE CONTROLS
<h1> – <h6>
<b> <i>
<strong> <em>
<pre> <code> <cite>

7. THE <font> TAG
• introduced in HTML 3.2 (January 1997)
• deprecated in HTML 4.0 (December 1997)
Yes, this has been deprecated for over 13 years.
stop using it.

8. ENTER CSS
• font-family stack
• font-style/weight
• font-size
• letter-spacing
• text-transform
• text-indent

9. THE PROBLEM

10. THE PROBLEM
Arial Palatino
Comic Sans Tahoma
Courier Times New Roman
Georgia Trebuchet MS
Impact Verdana
Lucida Sans 

11. THE WORKAROUNDS

12. IMAGE REPLACEMENT

13. IMAGE REPLACEMENT
BAD
<img> element with no alt attribute
BETTER
<img> element within <h1> (or similar)
BEST
CSS background-image replacement

14. IMAGE REPLACEMENT
IN YOUR HTML:
<h1 id=“title”>This is the headline</h1>
IN YOUR CSS:
h1#title {
height: 40px;
width: 350px;
overflow: hidden;
text-indent: -9999px;
background-image:url(headline.png);
}

15. IMAGE REPLACEMENT
PROS CONS
• design flexibility • filesize issues
• simple • easy to do badly
• “it just works” • maintenance

16. sIFR
Scalable Inman Flash Replacement

17. HOW sIFR WORKS
Your Generic Headline

18. HOW sIFR WORKS

19. HOW sIFR WORKS
Your Generic Headline

20. sIFR
CONS
PROS
• requires JS and Flash
• independent of
• “FOUT”
content
• hard to get perfect

21. CUFÓN
no, not the Computer UFO Network

22. CUFÓN
PROS CONS
• faster than sIFR • requires JS
• easier than sIFR • no text selectability
• pronunciation

23. ENTER @font-face
Our long-awaited savior (sort of)

24. @font-face HISTORY
• First introduced in css2 in 1998
• Removed in css2.1 in 2002
• Re-introduced in css3

25. @font-face SUPPORT
IE 4 Firefox 3.5 Opera 10 Safari 3.1 Chrome 4
1997 2009 2009 2008 Jan 2010

26. HOW @font-face WORKS
@font-face {
font-family: ‘Yourfont’;
src: url(‘fontfile.ttf’) format(‘truetype’);
}
@font-face {
font-family: ‘Yourfont’;
font-weight: bold;
src: url(‘fontfile-bold.ttf’) format(‘truetype’);
}
body {
font-family: Yourfont, Arial, sans-serif;
}

27. BUT WAIT!

28. FONT FORMATS
Different browsers support different font file types:
TrueType OpenType WOFF
(mobile)Safari Safari IE9
Opera Opera Firefox 3.6
Firefox Firefox Chrome 6
EOT SVG
IE iOS<4.2
and of course you want to avoid local fonts...

29. @font-face REVISITED
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype'),
url('webfont.svg#svgFontName') format('svg');
}
...or something like that anyway...

30. LEVERAGING @font-face
third-party hosted vs self-serve

31. THIRD-PARTY TOOLS
• take the complexities out
• often cost money
• providers:
Typekit.com
Fonts.com
Google.com/webfonts
Fontdeck.com

32. SELF-HOSTING
• no ongoing costs
• no CDN (for better or worse)
• require you to provide fonts in correct formats
• need to worry about licensing
This is fontsquirrel.
fontsquirrel is your friend!

33. DON’T STEAL FONTS

34. PLACES FOR LEGIT FONTS
Kernest.com
Google.com/webfonts
Fontsquirrel.com
League of Moveable Type
FontSpring.com
Others....

35. DON’T STEAL FONTS
or else kittens will die

36. TECHNICAL CONCERNS
FOUT*
Resource downloads
Outages
Compression
Lazy Loading
http://bit.ly/cfowt

37. ON THE HORIZON...
font-kerning
font-variant-ligatures
font-variant-caps
font-variant-numeric
font-variant-alternates
and more!
but still nothing for cross-platform rendering!

38. CONNECT
Ben Byrne
ben@byrnecreative.com
facebook.com/drywall
AIM: drywallbmb
Twitter: @drywall
http://spkr8.com/t/7394