Hacking the font Stack Explorations in a modern native fonts on the web
When the @font-face directive (which allows the use of non-system font files on webpages) made its official debut in the CSS3 fonts module, Flash was still a big part of the web. Compared to CSS at the time, Flash allowed for seemingly limitless possibilities in layout, typography, animations and consistency across platforms. It was extremely attractive to adopt with its relatively shallow learning curve and gave designers a more visual way to put content on the web.
A lot of folks (myself included) developed a palpable distaste for Flash-based sites as they were often slow to load, relied on a locally installed plugin, and often were a black box of content that was inaccessible to a large chunk of the web’s users. @font-face was just the thing CSS needed if was going to seriously compete with Flash and become adopted as part of the modern (and standard) way to build websites. HTML + CSS offered a more extensible and accessible way to present content and with the addition of features like @font-face we could start to see a future where the aesthetic consistency of Flash could be replicated with CSS.
I started experimenting with web fonts in 2007 after reading CSS @ Ten: The Next Big Thing.
Ten years prior, this CSS2 draft from 1997 mentions the @font-face directive but it was removed in the CSS2.1 spec.
🎉 Fun fact: Internet Explorer was the first browser to implement web fonts with @font-face, back in version 4 (1997).
The web is now available on any capable device, largely thanks to the adoption of mobile-friendly web design (like responsive), the downfall of Flash as a web technology, and a user base glued to their phones reading Facebook at any given time. This has forced those who build web pages to consider performance impacts (load time, render time, etc..) more than ever before — or at least since the days of dialup when that draft was written in 1997.
