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/
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
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)
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/
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
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
46.
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
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
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