Increasingly, the new big thing in web design is the inclusion of @font-face in CSS3 and most modern browsers. Why is @font-face such a big deal? To understand that, you must first understand the limitations of web design in the past as it applies to typefaces. To that end, a personal anecdote:
Like thousands of others, my first websites were hosted on GeoCities. Back then, a cool URL didn’t matter (and was more or less unattainable by non-corporate types anyway), and there wasn’t such a thing as “Googling”. So, while today it sounds quaint, a network hosting thousands of websites for free, in specialized “districts” based on your interests (or the topic of the site), that you could then explore and browse to see your neighbors was pretty cool. Much like MySpace, GeoCities gave you the tools to design your website by hand or pick from one of several different templates (and, also like MySpace, this had the result of creating a lot of truly hideous websites). The best part of GeoCities, for me, was it became a sandbox to learn and play with HTML. One thing I liked to experiment with was using different fonts I found online on my site. This was generally as simple as saying <font face=”NameOfFont”> in the source code of the page. Once I put the right font name in there, that site would have some pretty cool (or, alternately, really gaudy-but-I-thought-it-was-cool-at-the-time) titles or headings. However, once I went to another computer, my fantastic fonts I spent so long hunting down and embedding would be gone.
The reason for this is because when you declare a font on a webpage, your browser looks through the installed fonts on your computer for the appropriate font. If it doesn’t find it, it goes back to the backup font, or, lacking that, some browser- or Operating System-specific default font. And this is what web designers have been fighting with since the beginning of time (or at least, the Internet). We’re faced with using the lesser of the evils, choosing a font that looks more or less the same on all computers, or using a fantastic font that only a small handful of people can see.
@font-face changes that. Sort of. What it does is enable designers to embed a font into the stylesheet of the site. This means that when the page loads, the font downloads to the viewer’s computer the same as any other image on the site. This kind of font embedding isn’t really all that new — in fact, it’s been around for a while (although not all browsers have supported it). But increasingly, font designers and foundries are finding methods to make their fonts available for public use — either by going through a membership-based system like TypeKit – or by joining in a growing movement for openness and “free as in beer” fonts.
In an upcoming post, I will share the method for using @font-face in web design that we use, as well as some great free resources we’ve found along the way. The future of the web is exciting, and you can expect more and more complexity and creativity in design in the coming months and years.
Chris Reynolds is one half of Arcane Palette and writes the majority of the blog posts on this site. He also has a personal blog, jazzsequence, where he shares links, videos, thoughts about music, technology and gaming, and posts various personal music and writing projects.