The Type We Want covering font embedding on the web.

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?