Download - WOFF and emerging technology of web fonts
Company Confidential
WebFonts and Web Open Font Format
(WOFF)
Vladimir Levantovsky, Monotype Imaging Inc.,
chair of the W3C WebFonts WG
Fonts on the Web (where we were)
Over The Air 2010
• 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!
Fonts on the Web (where we are)
Over The Air 2010
• 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
WebFonts Working Group
Over The Air 2010
Fonts on the Web (where we are)
Over The Air 2010
• 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!
Fonts on the Web (where we are)
Over The Air 2010
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
WOFF
What is it, exactly?
Over The Air 2010
WOFF File Format
Over The Air 2010
Font Data
WOFF Header
Metadata optional
Private Data optional
WOFF File Format
Over The Air 2010
Font Data
Metadata
Private Data
WOFF Header Includes identifying signature, indicates the
specific kind of font data (TTF, OTF, etc.),
provides the file parsing information, font table
directory, etc.
WOFF File Format
Over The Air 2010
Font Data
Metadata
Private Data
name
m
a
x
p
cmap
h
e
a
d
h
h
e
a
O
S
/
2
p
o
s
t
hmtx
Glyph Data (CFF | glyf/loca)
GSUB GPOSDSIG
Compressed SFNT
(OpenType / OFF, TrueType)
WOFF File Format
Over The Air 2010
Metadata
Private Data
Unique ID A unique identifier for the font
Vendor The vendor name and URL
Credits Info about designer, hinter, etc.
DescriptionTypeface description, history, use
recommendation, etc.
License Info Information about font license
Copyright A copyright notice for the font
Trademark A trademark statement
Licensee The licensee for the font
Extensions Vendor-specific extended info
WOFF File Format
Over The Air 2010
Metadata
Private Data
<?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">
<text lang="en">A license description goes here.</text>
</license>
<copyright>
<text lang="en">©2010 Font Vendor</text>
…
WOFF File Format
Over The Air 2010
Metadata
Private Data
WOFF File Format
Over The Air 2010
Private Data
A block of arbitrary data
reserved exclusively for
use by font creators.
WebFonts in Action
Over The Air 2010
Musclehead
+
WebFonts in Action
Over The Air 2010
WebFonts in Action
Over The Air 2010
WebFonts in Action
Over The Air 2010
WebFonts in Action
Over The Air 2010
WebFonts in Action
Over The Air 2010
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
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
What WOFF isn’t!
Over The Air 2010
WOFF is not a new Font Format
Over The Air 2010
WOFF Metadata
Private Data
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
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
WOFF
Creation Tools
Over The Air 2010
sfnt2woffhttp://people.mozilla.com/~jkew/woff/
Over The Air 2010
WOFF Creation Tools
FontForge
http://fontforge.sourceforge.net/
Over The Air 2010
WOFF Creation Tools
WOFF Tools
http://code.typesupply.com/
http://tools.typesupply.com/Over The Air 2010
WOFF Creation Tools
Web Fonts:
Paradigm Shift
Over The Air 2010
Web Fonts: Paradigm Shift
Over The Air 2010
Content ServerApplications HTML
Images Video
Limited to Embedded
Web-Safe Fonts
Historic Paradigm Fonts on Device
(Applications require fonts
local on client)
Client
New ParadigmFonts downloaded from server
and installed on a device(Application and Content
environments provide support)
Online StoreApplications
Songs
Video
Fonts
High Quality
Font Selection
New ParadigmFonts downloaded from server
for temporary use(Browsers support CSS @font-face
command)
Web ServerApplications
HTML/CSS
Images
Video
Unlimited Fonts
Web Font Services
Over The Air 2010
Web Font Services
Over The Air 2010
Download Fonts
Web Pages
Fonts
Web Font
Services Servers
Customers
Subscribe to WFS
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
Fonts on Mobile Devices
UI Customization and Branding
Over The Air 2010
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
Use case: FlipFont™
Over The Air 2010
Use case: FlipFont™
Over The Air 2010
Use case: FlipFont™
Over The Air 2010
Use case: FlipFont™
Over The Air 2010
Use case: Application Brand Identity
Over The Air 2010
Ninja Mobile – BREW Developer
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
Web Font Awards
Over The Air 2010
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
Web Authors,
Application
Developers
Font
Makers
Web / Device
Users
Device/Browser
Vendors
WebFonts
for all!
Questions?
