Howd You Get That Font?

Trisha — Sun, 22 Nov 2009 06:19:30 +0000

Using CSS3 to Embed New fonts in Your Website.

If you’ve been tooling around web design and developer sites lately, you may have noticed a strange phenomenon. Nice fonts. Much nicer than the default web fonts, and no, they’re not images. I know from the 100 times I’ve selected the text muttering ‘wow thats cool’. We’re no longer stuck in what I’ve heard humorously termed as ‘arial hell’.

Until now, this was about it for web safe font usage:

Arial, (mac: Helvetica)

Arial Black, (mac: Gadget)

Comic Sans MS

Courier New

Geneva

Georgia

Impact (mac:Charcoal)

Lucida Console, (mac:Monaco) 

Lucida Sans Unicode, (mac:Lucida Grande)

Palatino Linotype, Book Antiqua

Tahoma, (mac:Geneva)

Times New Roman

Trebuchet MS, (mac:helvetica)

Verdana

Enter @font-face

@font-face is an actual css rule created years ago to embed fonts on a web page. It wasn’t supported by browsers until recently. Now Mozilla and IE support font embedding. I’ve tested in FireFox 3.5 and IE7. It works in both, though I feel IE’s a tad sluggish.

This is a huge step for online typography. Now when clients ask ‘Can we do something about those ugly fonts?” you can say, YES! yes we CAN! It’s a bright day in the web design world. To embed beautiful fonts, all you need is the right font formats and the CSS to get it done.

I’m all about handy tools to make life easier, so let’s head over to FontSquirrel where they have prebuilt ALOT of @font-face kits. This way we know the fonts are legal for your site (check the license for other uses) and the code is already written.

A peek at just a few of fontSquirrels font-face kits.

Since they provide little how-to, I’ll give you a quick walkthrough.
(W3 Documentation for @font-face)

The files.

-Your kit comes with all the fonts needed, in the following extensions:

.woff Web Open Font Format (mozilla)
.eot Embedded Open Type (microsoft)
.svg Scalable Vector Graphics (XML web graphics iphone)
.ttf standard TrueType font

-It comes with an external style sheet which defines your fonts for the browser. (stylesheet.css)

-And it comes with on-page example classes to control the size and line height. (in demo.html)

Lets plug it in.

Extract the files into a folder and upload them to your server. I called my new folder ‘fonts’ and put it inside my wordpress themes folder. I kept it simple and left stylesheet.css in the same directory as the fonts.
Open the file that contains your websites tags (index.html in most cases… header.php in your wordpress themes folder)
Include the following code inside the head tag (given in demo.html – make sure to use the correct path to the file)
Style your new font with CSS. (example classes given in demo.html)
its a simple switch.
say my h1 style was written this way…
h1 {font-family: Arial, sans-serif;}
Add the font-family defined in stylesheet.css like this:
h1 {font-family: 'DroidSansRegular', Arial, sans-serif;}

Thats all there is to it. Do it once and you’ll be a pro! And you can download them all, they’re free!

Other options and some history:
Replacing fonts for the web used to require much code. sIFR has been around for a while and I give them serious props for making it work. Looking into the code, I had to pass because frankly, its complicated. It uses javascript to call flash to redraw the fonts. And with all that code, page load time suffers. If the visitor doesnt have javascript or flash? They see the default.

Cufon is much easier to understand and implement and does a nice job. Their generator converts fonts to the correct format and there’s a nifty wordpress plugin. Less code means faster page loads but be aware of where your fonts are coming from and if you’re allowed usage on your website. Wouldn’t want license violations. You might even want to do some of your own comparison testing to see which loads faster, cufon or @font-face

Happy TypeFacing!

digitalRenewal » font embedding

Howd You Get That Font?

Enter @font-face

The files.

Lets plug it in.