SlideShare une entreprise Scribd logo
1  sur  46
Télécharger pour lire hors ligne
WebFonts and Web Open Font Format
             (WOFF)

     Vladimir Levantovsky, Monotype Imaging Inc.,
           chair of the W3C WebFonts WG



                     Company Confidential
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
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
WebFonts Working Group




        Over The Air 2010
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
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

 WOFF Header



  Font Data


   Metadata              optional


  Private Data           optional



     Over The Air 2010
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
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
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
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
WOFF File Format




 Metadata
Private Data
                    Over The Air 2010
WOFF File Format




                                  A block of arbitrary data
                                  reserved exclusively for
                                    use by font creators.




Private Data
                    Over The Air 2010
WebFonts in Action

                             Musclehead




                         +




     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
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

                                   WOFF Metadata




Private Data




               Over The Air 2010
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
WOFF Creation Tools




          sfnt2woff
http://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
Web Fonts:
Paradigm Shift



    Over The Air 2010
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
Web Font Services



      Over The Air 2010
Web Font Services
                           Customers
                           Subscribe to WFS
      Web Pages




                            Web Font
  Download Fonts            Services Servers



                                      Fonts



       Over The Air 2010
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




 Ninja Mobile – BREW Developer

              Over The Air 2010
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




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
Questions?



   Font                       Device/Browser
  Makers                         Vendors

               WebFonts
                for all!
Web Authors,                         Web / Device
 Application                           Users
Developers

                 Over The Air 2010

Contenu connexe

Similaire à WOFF and emerging technology of web fonts

Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacementbrinsknaps
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typographyFour Kitchens
 
real world web services
real world web servicesreal world web services
real world web servicesdominion
 
Session 2 - Silverlight Streaming, and Windows Live Search
Session 2 - Silverlight Streaming, and Windows Live SearchSession 2 - Silverlight Streaming, and Windows Live Search
Session 2 - Silverlight Streaming, and Windows Live Searchukdpe
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsYves Van Goethem
 
Silverlight Chapter 01 - Introduction
Silverlight Chapter 01 - IntroductionSilverlight Chapter 01 - Introduction
Silverlight Chapter 01 - IntroductionBill Hatfield
 
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...Eric Fickes
 
Web Service Presentation
Web Service PresentationWeb Service Presentation
Web Service Presentationguest0df6b0
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsPrototype Interactive
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbookFour Kitchens
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 
FATC UK - Real time collaborative Flex apps
FATC UK - Real time collaborative Flex appsFATC UK - Real time collaborative Flex apps
FATC UK - Real time collaborative Flex appsMichael Chaize
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010Aravind Naidu
 
Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?ukdpe
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalAshok Modi
 
Architecture of RIA from JAOO
Architecture of RIA from JAOOArchitecture of RIA from JAOO
Architecture of RIA from JAOOJosh Holmes
 

Similaire à WOFF and emerging technology of web fonts (20)

Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 
Web fonts
Web fontsWeb fonts
Web fonts
 
real world web services
real world web servicesreal world web services
real world web services
 
Session 2 - Silverlight Streaming, and Windows Live Search
Session 2 - Silverlight Streaming, and Windows Live SearchSession 2 - Silverlight Streaming, and Windows Live Search
Session 2 - Silverlight Streaming, and Windows Live Search
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
SilverlightCh01
SilverlightCh01SilverlightCh01
SilverlightCh01
 
Silverlight Chapter 01 - Introduction
Silverlight Chapter 01 - IntroductionSilverlight Chapter 01 - Introduction
Silverlight Chapter 01 - Introduction
 
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
 
Web Service Presentation
Web Service PresentationWeb Service Presentation
Web Service Presentation
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?
 
FATC UK - Real time collaborative Flex apps
FATC UK - Real time collaborative Flex appsFATC UK - Real time collaborative Flex apps
FATC UK - Real time collaborative Flex apps
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010
 
Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?Mike Taulty TechDays 2010 Silverlight 4 - What's New?
Mike Taulty TechDays 2010 Silverlight 4 - What's New?
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for Drupal
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the web
 
Architecture of RIA from JAOO
Architecture of RIA from JAOOArchitecture of RIA from JAOO
Architecture of RIA from JAOO
 

Dernier

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 

Dernier (20)

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 

WOFF and emerging technology of web fonts

  • 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