CSS2 @font-face threatens to make our pages prettier
It’s funny the way the universe echos sometimes. While I was walking to lunch yesterday I was thinking that it was high time developers got more choice about the fonts that their webpages display in. I mean we live in an age where bandwidth restrictions have relaxed so much there’s video linked from the homepage of the BBC news site, yet if you want to specify text fonts that’ll work on most window browsers there’s about 12 you can choose from. If you actually want your text to look similiar on browsers over different OSes suddenly you’re choosing vague “fonts” like “serif”, “sans-serif” and “fantasy”.
For ages the only real solution has been text displayed as graphics which is painful to maintain and inaccessible if you don’t keep your alt attributes up to date. However today I came across a link to a slightly more elegant solution that uses flash, the DOM and javascript to provide your desired typeface to the 90% of people whose browser can support it and plain text to everyone else.
And that got me thinking.. shouldn’t this be something that’s included in the CSS standard? And I did a bit of digging and it turns out that it is.
I cynically dismissed all this as too new and too cool to actually have any browser support and after half an hour of experimenting it seems it is. It seems IE supports something like this, but the fonts have to be in some special format.
This is the stylesheet code I used:
-
@font-face {
-
font-family: "Handage AOE Bold";
-
src: url(http://webdev.helephant.com/samples/handage.ttf) format("truetype");
-
}
-
H1 { font-family: "Handage AOE Bold", serif}
Oh well, it’ll be cool in the future when it’s supported widely.. I guess IE4+ support for the EOT format *is* probably 95% of the visitors to most websites anyway. And it gave me a good excuse to go visit my favourite quirky font site.
I have to stop being disappointed that web standards implementation doesn’t keep up with my enthusiasm for niftiness. Maybe one day I’ll try something in the standard that sounds cool and it’ll be such a pleasant surprise that it actually works in both IE and Firefox. ;)
Comments
The idea that an arbitrary website can specify font files that my browser should download automagically sounds like a nightmare to me. What if the font-file is 100MB (as an extreme example), or isn’t properly formatted (causing my browser to crash?) or I need to invoke root/admin privileges to get it installed permanently onto my system (so that I don’t need to re-download it every time I visit your site)?
In response, browser manufacturers will probably have to set the default to *not* download fonts, meaning that 80% of the population who don’t know how, or aren’t willing, to change their browser settings won’t leaving you in the same situation you’re in now.
And that leaves aside the issue of licencing fonts. How much do you think it would take to get a redistributable licence for a TTF font from, say, Adobe?
And, look, I can get a whole bunch of fonts for free simply by looking at the source of HTML pages and finding the download links in the CSS files.
Cheers
Ken
But aren’t the issues of copyright, filesize or format the same problems you have when you put an image up on the web?
The standard actually specifies that the fonts should only be available to the browser (though I guess that’s really a matter of implementation). The standard doesn’t specify the format so perhaps intellectual property issues could be resolved using some sort of encrypted format along the lines of what’s being developed for music files?
Course then we’re back to the problem of different browsers supporting different formats :)
It’s certainly naive, but I really wish this sort of stuff would just work so I could stop thinking about battling with the results of browser maker politics and start thinking about what I want to actually do with the technology.
But as one of my old bosses used to say “if it was easy, everyone would be doing it” :)
Usually, when you stick an image up on your website, you have rights to that image (eg you created it). However, you didn’t create Verdana, or Arial, or Eurostile, or Optima. These are created by various font foundries (like Linotype, or Adobe or whatever). Just because you have a copy bundled with your OS, doesn’t mean you can stick it up on your website, put a reference in your CSS stylesheet and have multitudes of visitors download it. That’s probably a breach of your font licence…
Yah, you have a good point. So can you see any solution that is as elegant and inobtrusive as downloading a font with your stylesheet which doesn’t make the markup of your webpage actually make less sense?
If I actually needed to do this for a real project, I’d probably write a small script that generated the heading images and then included them in the webpages with an img tag with an alt property. This’d solve the copyright issues, but what I really don’t like about this approach (apart from issues of flexibility and maintenance) is that it takes some of the meaning out of your markup. To most of the people viewing webpages through a normal browser it makes absolutely no difference whether your headings are graphics or actual text, but what if they aren’t viewing your document through a normal browser or what if the user isn’t actually a person?
The classic example of this is searchability. Using a H1 tag rather than an image helps google figure out what my page is about, but what worries me more is the fact that we don’t know what’s going to happen in the future. Maybe next year my website will need to be accessible to people using the browser software on their mobile phones. Maybe in the next 10 years people will be doing things with webpages in ways that we can’t even imagine right now. I want my websites to continue being useful for as long as possible without needing to recreate them from scratch everytime something changes.
One of the things I’ve learnt from doing web development is that using non-standard hacks makes things harder to maintain. It’s inevitable that things will change but trying to develop standard compliant documents that contain information about what things are rather than how they should look makes the upgrade path easier, particularly if you want to try to automate it.
So ends my rant (at the inperfect universe I’m forced to operate in, rather than you :)). That said, I think one of the things that makes web development and technology so interesting is that accomodating competing concerns can lead to interesting solutions to problems. I think the flash heading widget is a good example of that. I guess it’s like the endless debates about programming languages, there are no “right” answers, it all depends what you want to do and what you’re willing to sacrafice.
…the whole issue arises because you want to use a “not widely available” font. If you stick to the widely available ones, you can have
in text, rather than having to resort to images. As you say, it’s all about tradeoffs (like so many other things in IT)
:) yeah but your pages aren’t as pretty then.