by Bram Pitoyo (@bram) on Monday, 6 January 2014

+17
Vote on this proposal
Status: Confirmed & Scheduled
View session in schedule
Section
Full talk

Technical level
Intermediate

Media

Objective

  • See how modern webfonts got here
  • Learn how to subset, embed, compress and precache your own webfonts
  • See benchmarks of different optimization methods
  • See at least one incredibly fun (though rather impractical) hack
  • Learn why the future looks even more exciting (and not just for webfonts)

Description

It’s 2014. As cloud-hosted webfonts becomes the preferred way to go, it’s high time we understand methods that they use to make webfonts load faster and more resistant to copying, that you can pick and choose to optimize your next project.

  • How we got here: a history of methods and formats
    • TrueDoc (PFR)
    • Embedded OpenType (EOT)
    • Vector Markup Language (VML) and Scalable Vector Graphics (SVG)
    • Scalable Inman Flash Replacement (sIFR)
    • Web Open Font Format (WOFF)
    • System fonts on mobile devices: the incompatibility table
  • Explore current methods to secure webfonts
    • base64 embedding
    • subsetting (splitting into multiple font files, only loading the letters used)
      • Roll your own with connect-fonts
    • WOFF (zlib/gzip compression, then telling useragent to decode the file)
  • Compare the performance of each methods
    • Flash of unstyled texts (FOUT)
    • The problem of blank content, and how to prevent it:
      • Make separate CSS that only loads font file
      • Use JavaScript to precache font file
      • Hosting providers automate them for you (why load yet another copy of Open Sans if it’s been loaded by another site before?)
    • Parallel loading of smaller files
  • What’s next
    • Chromium started downloading fonts earlier (after style recalc)
    • Network Information API can prevent fonts from loading when bandwidth is low or metered

Speaker bio

At Mozilla, Bram Pitoyo is a design strategist and typographer who works at the nexus of user experience, architecture, community engagement and most other subjects.

The first iteration of this talk was presented in 2010, the point in time when webfonts was nascent, and when debates about the best way to embed fonts in a way that typefoundries would approve were still happening.

Comments

  • 1
    [-] Jitendra Vyas (@jitendravyas) 3 years ago

    +1

  • 1
    [-] Kiran Jonnalagadda (@jace) Reviewer 3 years ago

    Bram, does "security" in the context of web fonts refer to the security of intellectual property or browser vulnerabilities or both?

  • 1
    [-] Bram Pitoyo (@bram) Proposer 3 years ago (edited 3 years ago)

    Security of intellectual property. Typefounding is a thousand years old, and pirating a moveable type is a matter of refilling the mould with liquid metal, so the paranoia is, in many sense, historical.

    But you’ve made a good point about browser vulnerabilities. Badly coded fonts can crash machines. Pooja Saxena might know more about this – and perhaps this is a call for us to present this material together!

Login with Twitter or Google to leave a comment