You've gotten old, bulletproof @font-face syntax. Time to retire!
2009 — the year Michael Jackson died, Obama became president of the USA, and Avatar hit the silver screen.
Kanye West told Taylor Swift “I’mma let you finish”, David asked “is this real life” after a trip to the dentist, and Susan Boyle’s audition on Britain’s Got Talent became an internet video phenomenon.
And we all got the Trololo earworm
Nokia still ruled the mobile phone market. Apple’s iPhones, released two years prior and now running iPhone OS 3, held just 13.7% of the market. Android, with version 1.6 (nicknamed Donut) held a mere 2.8%.
Emoji wouldn’t come to these phones for another couple of years.
iPads and other tablets were not even on the horizon yet. Netbooks, specifically the Eee PC, were the summit of mobile computing.
We surfed the web with Chrome 3.0, IE8, Firefox 3.5 and Safari 4. Our computers were being asked if they could run Crysis.
Support for webfonts had just grown from Internet Explorer’s proprietary EOT format to TTF and OTF in Firefox, Safari and Opera. The WOFF format was still being drafted by Jonathan Kew, Tal Leming, and Erik van Blokland.
The bulletproof @font-face syntax is born
It was around that time when Paul Irish tried to make sense of all these different formats, and introduced the bulletproof @font-face syntax. This little snippet of code tried to make sense of all the various formats, bugs, quirks and scattered support. It provided for IE6 users, by then a browser that was already 8 years old. It explained how to turn on @font-face support in Chrome’s dev builds. It treated WOFF as the futuristic new font format is was back then. WOFF2 isn’t even mentioned at all.
But time ticks by, and now it’s 2019. The bulletproof @font-face syntax is celebrating its 10th year. It’s a decade old.
WOFF2 has superseded the once futuristic WOFF, and has been supported by major browsers for many years.
The group of people using antiquated hardware running crippled OSes and severely outdated browsers that need EOT, OTF/TTF or SVG fonts is so minuscule, that forcing webfonts on them feels inconsiderate instead of helpful. Maybe there’s accessibility or performance issues to be solved instead!
In 2019, your font loading strategy is better off by include a great fallback stack. Even in modern times, in evergreen browsers on spectacularly powerful devices, fonts can fail to load. Your visitors will be grateful to still be able to read your content — whether their train just entered a tunnel or they’re surfing on a decade old beige PC running Windows XP.
Thank you, bulletproof @font-face syntax
Thanks for providing us with a robust snippet when the webfont days were wild, support was super sketchy, and we needed some help getting to get our awesome webfonts to work. You’ve been a great little blob of CSS. But you’re 10 years old – that’s ancient in internet years!
Today, WOFF2 with WOFF as fallback, combined with a thoughtful fallback font stack, respectfully take your place in the web developer’s toolkit.
You’ve gotten old, bulletproof @font-face syntax. Time to retire!