WOFF and emerging technology of web fonts
-
Upload
vladimir-levantovsky -
Category
Technology
-
view
1.013 -
download
1
description
Transcript of WOFF and emerging technology of web fonts
![Page 1: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/1.jpg)
Company Confidential
WebFonts and Web Open Font Format
(WOFF)
Vladimir Levantovsky, Monotype Imaging Inc.,
chair of the W3C WebFonts WG
![Page 2: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/2.jpg)
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!
![Page 3: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/3.jpg)
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
![Page 4: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/4.jpg)
WebFonts Working Group
Over The Air 2010
![Page 5: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/5.jpg)
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!
![Page 6: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/6.jpg)
Fonts on the Web (where we are)
Over The Air 2010
![Page 7: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/7.jpg)
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
![Page 8: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/8.jpg)
WOFF
What is it, exactly?
Over The Air 2010
![Page 9: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/9.jpg)
WOFF File Format
Over The Air 2010
Font Data
WOFF Header
Metadata optional
Private Data optional
![Page 10: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/10.jpg)
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.
![Page 11: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/11.jpg)
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)
![Page 12: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/12.jpg)
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
![Page 13: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/13.jpg)
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>
…
![Page 14: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/14.jpg)
WOFF File Format
Over The Air 2010
Metadata
Private Data
![Page 15: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/15.jpg)
WOFF File Format
Over The Air 2010
Private Data
A block of arbitrary data
reserved exclusively for
use by font creators.
![Page 16: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/16.jpg)
WebFonts in Action
Over The Air 2010
Musclehead
+
![Page 17: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/17.jpg)
WebFonts in Action
Over The Air 2010
![Page 18: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/18.jpg)
WebFonts in Action
Over The Air 2010
![Page 19: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/19.jpg)
WebFonts in Action
Over The Air 2010
![Page 20: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/20.jpg)
WebFonts in Action
Over The Air 2010
![Page 21: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/21.jpg)
WebFonts in Action
Over The Air 2010
![Page 22: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/22.jpg)
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
![Page 23: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/23.jpg)
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
![Page 24: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/24.jpg)
What WOFF isn’t!
Over The Air 2010
![Page 25: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/25.jpg)
WOFF is not a new Font Format
Over The Air 2010
WOFF Metadata
Private Data
![Page 26: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/26.jpg)
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
![Page 27: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/27.jpg)
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
![Page 28: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/28.jpg)
WOFF
Creation Tools
Over The Air 2010
![Page 29: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/29.jpg)
sfnt2woffhttp://people.mozilla.com/~jkew/woff/
Over The Air 2010
WOFF Creation Tools
![Page 30: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/30.jpg)
FontForge
http://fontforge.sourceforge.net/
Over The Air 2010
WOFF Creation Tools
![Page 31: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/31.jpg)
WOFF Tools
http://code.typesupply.com/
http://tools.typesupply.com/Over The Air 2010
WOFF Creation Tools
![Page 32: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/32.jpg)
Web Fonts:
Paradigm Shift
Over The Air 2010
![Page 33: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/33.jpg)
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
![Page 34: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/34.jpg)
Web Font Services
Over The Air 2010
![Page 35: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/35.jpg)
Web Font Services
Over The Air 2010
Download Fonts
Web Pages
Fonts
Web Font
Services Servers
Customers
Subscribe to WFS
![Page 36: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/36.jpg)
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
![Page 37: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/37.jpg)
Fonts on Mobile Devices
UI Customization and Branding
Over The Air 2010
![Page 38: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/38.jpg)
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
![Page 39: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/39.jpg)
Use case: FlipFont™
Over The Air 2010
![Page 40: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/40.jpg)
Use case: FlipFont™
Over The Air 2010
![Page 41: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/41.jpg)
Use case: FlipFont™
Over The Air 2010
![Page 42: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/42.jpg)
Use case: FlipFont™
Over The Air 2010
![Page 43: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/43.jpg)
Use case: Application Brand Identity
Over The Air 2010
Ninja Mobile – BREW Developer
![Page 44: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/44.jpg)
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
![Page 45: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/45.jpg)
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
![Page 46: WOFF and emerging technology of web fonts](https://reader033.fdocuments.in/reader033/viewer/2022052910/559b1e0f1a28abd8638b4598/html5/thumbnails/46.jpg)
Over The Air 2010
Web Authors,
Application
Developers
Font
Makers
Web / Device
Users
Device/Browser
Vendors
WebFonts
for all!
Questions?