Meta Refresh 2014

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

Outline

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.

Slides

http://www.slideshare.net/brampitoyo/font-conf