The document discusses the history and current state of web fonts. It describes how the W3C WebFonts working group was formed in 2008 to address browser incompatibility issues. The working group standardized the Web Open Font Format (WOFF) which allows fonts to be used on websites across browsers. WOFF provides font data compression and metadata for licensing and attribution. Major browsers now support WOFF, resolving the longstanding challenge of delivering high quality fonts on the web.

1. WebFonts and Web Open Font Format
(WOFF)
Vladimir Levantovsky, Monotype Imaging Inc.,
chair of the W3C WebFonts WG
Company Confidential

2. Fonts on the Web (where we were)
• 1996
• First W3C attempt to bring fonts on the Web
• Two major browsers supporting incompatible font
solutions (EOT vs. PFR)
• Web authors resorted to using “web-safe” fonts
• 2007
• Some browsers introduced support for raw fonts
• Creation of the Fonts Working Group is discussed
• 2008
• EOT submission – the debate continues
• 2009
• ZOT & .webfont proposals – we’re out of the maze!
Over The Air 2010

3. Fonts on the Web (where we are)
• ZOT + .webfont = WOFF
• New format is born
– Many thanks to the original
authors Erik van Blokland
(Letterror.com), Jonathan Kew
(Mozilla) and Tal Leming (Type
Supply)
• Font and browser makers are
united with Web authors and
users
• WebFonts WG is formed
Over The Air 2010

4. WebFonts Working Group
Over The Air 2010

5. Fonts on the Web (where we are)
• WOFF specification is published as a First
Public Working Draft
– Spec is available without fees (RF commitments)
– Triggers opportunity for patent exclusion
– More drafts may follow – clarifications,
improvements, bug fixes, but no major changes are
expected!
• Major browsers support WOFF today!
Over The Air 2010

6. Fonts on the Web (where we are)
Over The Air 2010

7. Fonts on the Web (where we go)
• Last Call Working Draft
– Everyone agrees and we are all happy
– Last opportunity for patent exclusion
– Accessibility and internationalization review
• Candidate Recommendation
– Creation of a test suite
– Testing of implementations
– Implementation report (2+ implementations pass)
• Proposed Recommendation (W3C, pass/fail)
• W3C Recommendation – Web Standard!
Over The Air 2010

8. WOFF
What is it, exactly?
Over The Air 2010

9. WOFF File Format
WOFF Header
Font Data
Metadata optional
Private Data optional
Over The Air 2010

10. WOFF File Format
WOFF Header Includes identifying signature, indicates the
specific kind of font data (TTF, OTF, etc.),
provides the file parsing information, font table
directory, etc.
Font Data
Metadata
Private Data
Over The Air 2010

11. WOFF File Format
Compressed SFNT
(OpenType / OFF, TrueType)
name
h h O m p
Font Data cmap hmtx e h S a o
a e / x s
d a 2 p t
Glyph Data (CFF | glyf/loca)
Metadata
Private Data GSUB DSIG GPOS
Over The Air 2010

12. WOFF File Format
Unique ID A unique identifier for the font
Vendor The vendor name and URL
Credits Info about designer, hinter, etc.
Typeface description, history, use
Description
recommendation, etc.
License Info Information about font license
Copyright A copyright notice for the font
Trademark A trademark statement
Metadata
Licensee The licensee for the font
Private Data Extensions Vendor-specific extended info
Over The Air 2010

13. WOFF File Format
<?xml version="1.0" encoding="UTF-8"?>
<metadata version="1.0">
<uniqueid id="com.example.fontvendor.demofont.bold.2010" />
<vendor name="Font Vendor" url="http://fontvendor.com" />
<credits>
<credit name="FontDesigner“ url="http://fontdesigner.com”
role="Art Director" />
<credit name="Another Font Designer“ role="Designer" />
</credits>
<description>
<text lang="en“> A member of the Demo font family. </text>
</description>
<license url="http://fontvendor.com/license" id="woff-2010-A">
Metadata <text lang="en">A license description goes here.</text>
</license>
<copyright>
Private Data …
<text lang="en">©2010 Font Vendor</text>
Over The Air 2010

14. WOFF File Format
Metadata
Private Data
Over The Air 2010

15. WOFF File Format
A block of arbitrary data
reserved exclusively for
use by font creators.
Private Data
Over The Air 2010

16. WebFonts in Action
Musclehead
+
Over The Air 2010

17. WebFonts in Action
Over The Air 2010

18. WebFonts in Action
Over The Air 2010

19. WebFonts in Action
Over The Air 2010

20. WebFonts in Action
Over The Air 2010

21. WebFonts in Action
Over The Air 2010

22. Same-Origin Restriction and CORS
• WebFonts introduce a
significant security risk
• Same-origin restriction
protects users from
malicious attacks
involving font files, and
is mandated by CSS and
WOFF specifications
Over The Air 2010

23. Same-Origin Restriction and CORS
• Same-origin restriction is satisfied if both
HTML document and the fonts are delivered
using:
• Same protocol
• Same domain
• Same port
• The restriction can be lifted using “Cross-
Origin Resource Sharing”
Over The Air 2010

24. What WOFF isn’t!
Over The Air 2010

25. WOFF is not a new Font Format
WOFF Metadata
Private Data
Over The Air 2010

26. WOFF is not a DRM
• There is no obfuscation
or rights management:
– A font packaged inside WOFF
file can be easily converted
back to its original format.
– WOFF serves as a “garden
fence” that informs users about
the intended web font use and
license conditions.
– Violators can no longer claim
ignorance – they know exactly
what they’re doing
Over The Air 2010

27. WOFF is not theft-proof
• “Can I download a WOFF file from a Web
server and simply upload it to my own server?”
• Yes, you can! But:
– The WOFF metadata says that someone else has actually
licensed a font.
– The private data will likely contain information that
identifies a licensee transaction
– Metadata and private data can be removed but the font
itself remains identifiable
Over The Air 2010

28. WOFF
Creation Tools
Over The Air 2010

29. WOFF Creation Tools
sfnt2woff
http://people.mozilla.com/~jkew/woff/
Over The Air 2010

30. WOFF Creation Tools
FontForge
http://fontforge.sourceforge.net/
Over The Air 2010

31. WOFF Creation Tools
WOFF Tools
http://code.typesupply.com/
http://tools.typesupply.com/
Over The Air 2010

32. Web Fonts:
Paradigm Shift
Over The Air 2010

33. Web Fonts: Paradigm Shift
New Paradigm Historic Paradigm New Paradigm
Fonts downloaded from server Fonts on Device Fonts downloaded from server
for temporary use (Applications require fonts and installed on a device
(Browsers support CSS @font-face local on client) (Application and Content
command) environments provide support)
Web Server Content Server Online Store
Applications HTML
Applications Applications
Images Video
HTML/CSS Songs
Images Limited to Embedded Video
Video Web-Safe Fonts Fonts
High Quality
Unlimited Fonts Font Selection
Client
Over The Air 2010

34. Web Font Services
Over The Air 2010

35. Web Font Services
Customers
Subscribe to WFS
Web Pages
Web Font
Download Fonts Services Servers
Fonts
Over The Air 2010

36. Web Font Services
• Font Squirrel (45 free fonts)
• Fontdeck.com
• Fonts.com Web Fonts (over 7,500 fonts)
• Fonts Live (125 fonts)
• Google Font API / Directory (20 free fonts)
• Kernest
• Typekit (over 500 fonts)
• Typotheque
• WebINK (~2,000 fonts)
• Webtype (~100 fonts)
• … (I am sure I’ve missed a few, sorry)
Over The Air 2010

37. Fonts on Mobile Devices
UI Customization and Branding
Over The Air 2010

38. Use case: FlipFont™
• Product description:
– FlipFont™ application / SDK
• Fully productized on S60 and
Android 2.1+ platforms
– FlipFont™ fonts
• collection of high quality fonts
designed to replace UI font(s)
on targeted devices
– FlipFont™ store
• FlipFont.mobi website
• Operator / OEM portals
• Android Marketplace
Over The Air 2010

39. Use case: FlipFont™
Over The Air 2010

40. Use case: FlipFont™
Over The Air 2010

41. Use case: FlipFont™
Over The Air 2010

42. Use case: FlipFont™
Over The Air 2010

43. Use case: Application Brand Identity
Ninja Mobile – BREW Developer
Over The Air 2010

44. Font Usage Models
• Font web store model ?
– SDK is freely available, no cost for application developers
– Application allows users customize its appearance / UI
– Users can choose to buy any font they like, or continue
using device-resident fonts
• Font services model ?
– Application developers subscribe to a font service for a
low monthly / annual fee (based on the expected number
of users or usage volume)
– SDK is freely available
– Developers can choose any number of fonts from a wide
selection of available typefaces and styles
Over The Air 2010

45. Web Font Awards
Any Web Font service! Any technology! Any design!
A design competition for website using Web fonts. Learn more
at www.webfontawards.com
Over The Air 2010

46. Questions?
Font Device/Browser
Makers Vendors
WebFonts
for all!
Web Authors, Web / Device
Application Users
Developers
Over The Air 2010