Fonts of Many Faces
Today I had my first battle with the beast that is @font-face. While the setup is simple, it certainly had it’s ups and downs. I’ll give a quick rundown of the usage, legal aspects, and a few tips and tricks I picked up along the way. Font-face is actually an old CSS2 property, however it’s really picking up speed with the current CSS3-focused crowd. I know some people prefer things like Cufon or Typekit, but I like to have a dependable ‘real’ text base to work with.
So.. What is Font-Face Anyways?
Font-Face is an incredibly simple CSS property that allows the browser to render your page with a non-default font. It downloads the font files from your (or another’s) server, just like images/scripts, and uses them accordingly. This allows you to safely use your own fonts as real, readable, crawlable, highlightable goodness.
CSS Syntax
The syntax is simple, and you can throw it up either in a style tag, or at the top of your CSS file.
@font-face {
font-family: 'FontNameHere';
src: url('path/to/yourfont.otf') format('opentype');
}
It should be mostly self explanatory, font-family defines the name of the font for the rest of the file. For example, with this setup you could set paragraphs to font-family: ‘FontNameHere’, instead of the ‘true’ name of the font.
The src simply points to the location of the font file, so the browser can download and cache it correctly; this is where the legal aspect kicks in.
Legalities
In every sense, you are distributing a font for free directly to your visitors. Obviously for fonts with paid licenses, you’re essentially giving it away for free. Even those fonts that are free for personal/commercial use often have a clause stating you cannot redistribute that font, or require credits.
Basically, read the terms and conditions of each font carefully. There are a few sites out there, such as The League of Movable Type, that offer safe to use fonts.
What about Internet Explorer?
Now I know you’re all cringing, awaiting the sad truth about how IE can’t possibly support anything awesome.. however it does!
Sort of. IE has actually had support for font-face for a long, long time. The problem is that (as usual) it only supports it’s own odd filetype, ‘.eot’. I was trying to find a good online converter, but most weren’t working well for me. I was pointed at WEFT, Microsoft’s ‘Web Embedding Fonts Tool’, however it was a massive headache and destroyed me utterly.
Luckily, you can use Font Squirrel’s Font-Face generator, or Font-Face kits. Both options will give you both the OTF and EOT (Sometimes TTF) files, as well as the CSS declarations needed to use them. Overall this saved me a lot of time and heartache.
Blegh, My Font Looks Horrid!
This can happen. Many fonts today (especially free fonts) aren’t designed for use on the web. Try using some of your favorite fonts in notepad, and see how bad they look without anti-aliasing (I’ll wait.) Even worse, some fonts have terrible kerning or line heights. Luckily we can fidget with most typographic settings with CSS, and you might need a little experimentation to get things looking sexy.
Text-Shadow
A quick way to smooth out those fonts is to use a quick CSS3 property coupled with RGBA.
font-family: 'YourfontName', Verdana, Helvetica, Arial;
color: black;
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 1px;
This will give a 70% opacity, 1 pixel ‘border’ around your fonts. While it won’t always save the day, it’s always worth a shot. It’s worth noting that Webkit tends to ’slim’ fonts down when applying text shadows, however I’ve noticed that most custom fonts aren’t affected as much.
School’s Out Kids
So that’s it. Hopefully this brief overview is enough information to help you get started with this fantastic property. Like most designers, I’m expecting the next big ‘thing’ this year to be typography, and custom fonts is a great stepping stone.
Brandon Diaz is the creator of The Corrupted Canvas. He's a web designer with a pretty severe caffeine addiction. He's avid about many things including web standards, web development, various teas, and game design. If you'd like to get in touch you can find him on Twitter.
