Nothing irritates me more on websites than when I see text rendered as graphics. Okay, I take that back – people not picking up after their dogs irritates me more, but I digress. Why would you put perfectly good H1s or body text in a graphic? Some people would say, “Because I want to use that font, but it’s not web-safe.” We-he-he-he-llll, friend, let me tell you a little secret: the @font-face CSS property is here to save the day.
This CSS property, released with CSS3, allows you to essentially call a font file from your server and load on your website. I kind of nerded-out a little when I saw a preview of what this property was capable of. I’m not ashamed to admit that drooled a little…
Little History Lesson and a Little Reasoning
Once upon a time, all we could use were web safe fonts like Arial, Times New Roman, Impact, and Comic Sans. Yuck. I mean, there’s nothing wrong with those fonts, but because they are on literally every website out there, we get a little bored of them, amiright? Enter @font-face. Capable of throwing any (legally-obtained) font on your website, this property has allowed web designers to add so much more flair and uniqueness to their sites, not to mention impress the pants off detail-oriented clients. Another added bonus? More content for Google spiders to crawl and index which means more content that could be relevant to a search. Those headers that you had as a graphic? Now you can put a few H1 tags around it and make it truly searchable.
The Process
“Awesome! I’m hooked! But how does it work?” you ask. I’m going to assume that if you’ve gotten this far, and are truly “hooked” onto this idea, then you are fairly fluent in HTML and CSS. If you’re not, read the rest and see if it makes sense. If not, leave me a comment below and I can try to help.
Now that we’ve established you may or may not be an HTML/CSS guru, the first step is finding the font you want to use. There are a few options for you:
- Find the actual font file on your computer to upload to your server
- Use an @font-face generator to upload your file and host it and optimize it elsewhere
- Find a font to use from various foundries/companies to use instead of hosting the file yourself.
The first two options above require a file to be called from your CSS file. The last option will allow you to choose a foundry/company from which to pull the font file, and some will even walk you through the steps of how to install it on your site. It may be worth reading the rest of this though, just so you have an idea of what you’re doing, and why.
So, if you’ve chosen to host the file, either on your server, or somewhere else, the next step is implementing in your website’s code. In theory, the only file you need to edit for this is the CSS. Below is the style. Keep in mind that you have to do this for each weight of the font (different font files for different weights = different styles to call them).
@font-face {
font-family: fontname;
src: url('http://www.locationoffont.com');
}
@font-face {
font-family: fontname italic;
src: url('http://www.locationofitalicfont.com');
}
Now you need to decide what types of text on your site you want this font to be in. Headers? Body text? Once you’ve made your decision, you apply the font-family attribute to that style. For example, if you want it on your H1 tags, then your CSS for the H1 tag will look like this:
h1 {
font-family: fontname, Georgia, serif; ...
}
So on and so forth. You simply call the “fontname” you gave your font in the @font-face property in the style of the text you want (ie, h1, p, etc.), and you’re good to go.
Worth Noting…
There are a few things I feel I must mention, even though I know you all are logical web designers. First, the more fonts you use, or the larger the files of the fonts, the longer the load times. Second, this is not a perfect system. Be sure you are checking for cross-browser compatibility, and of course call other fonts in your font-family attribute (ie, “font-family: fontname, Georgia, serif;”). I’m really mentioning that because we all know and hate IE. Mozilla and Safari have pretty good support for this property.
That’s the long and short of it. If you have any questions or if you want to point out a flaw in my post, I encourage you to leave a comment. Thanks, y’all!