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 through TrueType, OpenType, Embedded OpenType and SVG formats, but font licensing and performance need to be considered. Services exist to help with font hosting and subsetting can reduce file sizes but may cause issues. Overall font embedding remains challenging due to technical and licensing restrictions.
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