Today's Discovery: CSS3's @font-face property

A couple weeks ago, when I first started planning out the re-design of http://raquelvelez.com, I discovered this really neat font: Shadows Into Light. (I may have, in fact, spent near an hour going through dafont.com‘s entire handwriting section, in an effort to find one that was most like my own. Eventually, I’ll create my own font, but now is not the time to do that!)

And, knowing absolutely nothing about CSS3 and a bit about putting images onto a site, I went ahead and made a whole slew of images using the font. (For the record, I use Inkscape, mostly because it’s open source and easy to use.) Then I spent hours trying to arrange the images on my screen in a way that would look cool.

But when you really think about it, images take time to load, especially on older browsers. The more images you have, the more time it takes to load them all. For most people, who are using the latest browsers on fast home computers, it’s not much of a problem. But for anyone using an older machine, it could be. Add to that, then, the fact that many browsers cache images in order to speed up load time in the future, and now those extra images are taking up space on every computer with caching enabled.

So, then, what’s the solution?

Allow me to introduce you to CSS3’s @font-face property. CSS3 is the latest and greatest version of CSS. Though CSS3 as a whole is not used by every browser yet, many of its properties are, and @font-face happens to be one of them.

So, then, to incorporate fancy fonts like the one I used, all you need to do is store the font file with the rest of your code and properly declare it in your CSS file.

For example:

[css smarttabs=”true”]@font-face {
font-family: ‘Shadows Into Light’;
src: url(‘fonts/Shadows_Into_Light.ttf’) format(‘truetype’);
font-weight: normal;
font-size: normal;
}

h1, p, ul {
font-family: ‘Shadows Into Light’, Helvetica, Arial, sans-serif;
font-size: 1.5em;
}[/css]

Now, every time I write something in between h1, p, or ul tags, I’ll have my snazzy font! No more images, no more caching; just simple, unadulterated fancy.

Except, of course, if a viewer’s browser doesn’t support the fancy font. At that point, all the text will fall into Helvetica or Arial or whatever other sans-serif font the browser does support.

Hurray!