This document discusses different methods for embedding fonts on web pages, including their advantages and disadvantages. The font tag allowed using images of text for any font but had performance issues. CSS font stacks provide flexibility but not all fonts will be visible to users. JavaScript methods like SIFR and Cufón let any font be used but have limitations. The @font-face rule allows dynamic font usage with full CSS styling across browsers but requires font files in multiple formats and licensing can restrict embedding. Services exist to handle font hosting and formatting but have disadvantages around reliance on their servers. Subsetting and compression can improve performance but must be done carefully.

1. THE TYPE WE WANT
Fonts on the Web

2. WHAT DOES TYPOGRAPHY DO?

9. TYPOGRAPHY HELPS DEFINE…
• Style
• Feel
• Mood
• Readability

10. FONT TAG
Ooh, we can make it pretty!

11. FONT TAG
<font
face="Arial"
size="3">
I
feel
pretty.
Oh
so
pretty.
</font>

12. IMAGES
Any font but at what price?

13. IMAGES
• Images allows for any font to be used
• Performance
• Only practical for limited items with
short text
• Abused by clients
• Printing is less than ideal
• No text selection

14. TEXTORIZE
• Server-based image generation
• Uses Mac OS X rendering engine
• Sub-pixel Anti-aliasing
• Ruby-based
• http://textorize.org/

15. CSS FONT STACKS
Flexible design but who gets to see it?

16. CSS FONT STACKS
#pretty
{
font-­‐family:
Arial,
Helvetica,
sans-­‐serif;
}
#prettier
{
font-­‐family:
"Gotham
Medium",
sans-­‐serif;
}

17. OOPS!
<p
class="bodytext">I
want
to
look
pretty</p>
<p
class="bodytext">I
want
to
feel
pretty</p>
<p
class="bodytext">I
want
to
be
pretty</p>

18. COMMON FONT STACKS
• Arial, Helvetica, sans-serif
• Courier New, Courier, monospace
• Times New Roman, Times, serif
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

19. COMPLEX FONT STACKS
"Segoe UI", Candara, "Bitstream Vera Sans",
"DejaVu Sans", "Bitstream Vera Sans",
"Trebuchet MS", Verdana, "Verdana Ref",
sans-serif

20. COMPLEX FONT STACK
• Better Font Stacks
http://unitinteractive.com/blog/2008/06/26/better-
css-font-stacks/
• 8 Definitive Web Font Stacks
http://articles.sitepoint.com/article/eight-definitive-
font-stacks

21. SIFR, CUFÓN, TYPEFACE
Now we’re getting somewhere

22. SIFR
• requires JavaScript AND Flash
• Slow for a lot of elements
• Best used for headlines
• Can be difficult to tweak
• Support for CSS features is limited

23. CUFÓN
• Generates SVG font and VML outlines
• Draws to <canvas> in all browsers that
support it (ie: not IE)
• No text selection
• Original text is made invisible
• Supports some CSS Styling (more than
sIFR)

24. TYPEFACE.JS
• Similar to Cufón
• Includes letter-spacing and font-stretch

25. LICENSING
• Most licenses aren’t very clear and should
be clarified with foundry
• Many fonts don’t allow embedding in this
fashion

26. @FONT-FACE
Have we reached utopia?

33. ADVANTAGES
• Dynamic
• Style with the full extent of CSS
• Can work on mobile platforms
• Print Quality

34. TRUETYPE (TTF) & OPENTYPE (OTF)
• Firefox 3.5+, Safari 3+, Opera 10+
• Including Opera Mobile
• In Chrome 4

35. EMBEDDABLE OPENTYPE (EOT)
• Support in IE4+
• TTF2EOT
– Command line
– Web services exist to make this conversion
• WEFT
– Complete and utter garbage

36. OTF TTF EOT
• EOT apps require TTF but most fonts
today are OTF.
• FontForge will convert OTF to TTF
• Font names aren’t transferred and must be
set manually to allow TTF to EOT process
to work reliably.
http://snook.ca/archives/html_and_css/screencast-
converting-ttf2eot

37. SVG FONTS
• Chrome 0.3+ support with no need for a
command line flag
• Works on iPhone OS3.1+
• Opera bug doesn’t show embedded font
on second tab
• Text selection works but not consistently

38. CREATING SVG FONTS
• FontForge
• Batik
– SVG may need to be cleaned up to remove
extraneous data (empty nodes and
attributes)

39. WEB OPEN FONT FORMAT (WOFF)
• in Firefox 3.6
• Supported by major font foundries
• IE9?

40. CREATING WOFF FILES
• Command line tool: sfnt2woff
• Mac or Windows
http://people.mozilla.com/~jkew/woff/

41. BULLETPROOF @FONT-FACE
@font-­‐face
{
font-­‐family:
'MuseoCustom';
src:
url('MuseoSans-­‐500.eot');
src:
local('Museo
Sans
500'),
local('MuseoSans-­‐500'),
url('museo.woff')
format('woff'),
url('MuseoSans-­‐500.ttf')
format('opentype'),
url('museo.svg#museo')
format
('svg');
}

42. FONT SQUIRREL
• one step conversion process
• Upload TTF or OTF
• Provides EOT, SVG and WOFF format
• Creates example HTML and CSS
• Supports Cufón fallback
• Does subsetting

43. PERFORMANCE

44. SUBSETTING
• Font files can be megabytes in size
• Arial Unicode MS is 23MB
• Many fonts are still 100K+

45. SUBSETTING
• Subsetting reduces the number of glyphs
in the file
• great for latin languages
• not so great for asian languages

47. SUBSETTING PROBLEMS
• Be careful removing lower case glyphs if
using upper case
• IE and Opera have a bug with text-
transform: uppercase that will use
fallback font instead of subsetted font

48. COMPRESSION
• EOT and WOFF support compression
• WEFT compresses by default, TTF2EOT
doesn’t
• Use GZIP compression where font isn’t
already compressed
– uncompressed EOT
– TTF, OTF, and SVG

49. FLASH OF UNSTYLED TEXT
• Firefox, Opera shows unstyled text until
font downloaded (FOUT!)
• Blocking in IE if <script> before @font-
face declaration; otherwise, unstyled
until font downloaded

50. FLASH OF UNSTYLED TEXT
• Safari, Chrome show no text until font
downloaded
• Opera 10.10 doesn’t show the
embedded font after the first page

51. BIGGEST HURDLE IS STILL LICENSING

52. LICENSING
• Most fonts, even some free fonts, DON’T
allow @font-face embedding
• Foundries that support WOFF haven’t
provided updated licenses yet
• Contact them directly for more info

53. SOLVING THESE PROBLEMS

54. FONT EMBEDDING SERVICES
• TypeKit
• Typotheque
• Kernest
• FontDeck
• FontSpring

55. DISADVANTAGES TO SERVICES
• If the server goes down, does your
design have a suitable fallback?
• Some services require JavaScript
• None of the services serve SVG
• Services obfuscate to prevent ability to
install font permanently
• Not cached

56. RESOURCES
• FontForge
http://fontforge.sourceforge.net/
• Batik
http://xmlgraphics.apache.org/batik/tools/font-
converter.html
• FontSquirrel Generator
http://www.fontsquirrel.com/fontface/generator

57. WHERE TO GET FONTS
• FontSquirrel
http://www.fontsquirrel.com/
• TypeKit
http://typekit.com/
• Typotheque
http://www.typotheque.com/
• FontSpring
http://www.fontspring.com/
• Kernest
http://www.kernest.com/

58. QUESTIONS?