When I first started creating websites you could really only safely choose between two fonts, Arial and Times New Roman. This lead to really a simple choice of whether you wanted your type to be serif or sans-serif. It was that way for years so I never really got too involved in learning any other ways to handle type on the internet.

Then with the move to standards based websites the game seemed to be opening up.

The problem however was that there were multiple ways to do the same thing all of sudden. The worst part was it seemed that no one could say which way was the best way.

That was years ago and we’re probably much more stabilized now so I feel its a good time to jump back into this subject and figure out what I don’t know.

Getting started

The first thing to do after you know what font you’d like to use is to decide where it’s going to live. Or rather who is hosting it. There are a few services out there for font hosting. The bigger ones seem to be Adobe Typekit, and of course Google Fonts.

If you already have the font on your system you can choose to host it yourself. To do that you would just upload it as you would any other files needed for you site. My preference right now is to keep it in a fonts folder at the site root.

There are many formats to choose from for your fonts. Each with their own strengths. In many cases you’ll want to include a couple of formats as a backup since they of course don’t all work in all of the browsers.

The formats can be:

• EOT – Embedded Open Type for Internet Explorer
• OTF – OpenType
• TFF – TrueType
• WOFF – Web Open Font Format
• SVG – Scalable Vector Graphics

Once you have your font uploaded its time to enable it for use in your CSS. This is where a new tag would come in to play. The @font-face tag doesn’t appear like most of your CSS tags. It starts with the @ symbol which is used for a couple of other functions but we’ll get to those some other time.

The basic syntax for using @font-face is this:


@font-face {
font-family: 'yourfontname';
src: url('../fonts/yourfont.eot'); // IE Fallback
src: url('../fonts/yourfont.otf');
// etc
}


One of the tricky parts is that you’ll have to do this declaration for all the typefaces you plan to use including bold and italic.

In order to ensure this code is less likely to fail we can include an indicator as to what format the font is in.


@font-face {
font-family: 'yourfontname';
src: url('../fonts/yourfont.eot'); // IE Fallback
src: url('../fonts/yourfont.otf');
format('opentype');
// etc
}


Then as one further precaution, and a best practice to keep your site loading as fast as possible, we include a line to check if the user has the font already on their device. This increases performance by saving the user from having to download something they already have.


@font-face {
local('yourfont');
font-family: 'yourfontname';
src: url('../fonts/yourfont.eot'); // IE Fallback
src: url('../fonts/yourfont.otf');
// etc
}


An extra note on the use of local. If your font name has spaces in it you may want to include an extra line that has hyphens or underscores in the name. This foolproofs your code in case some systems replace the spaces when they load.


@font-face {
font-family: 'yourfontname';
font-family: 'your_font_name';
src: url('../fonts/yourfont.eot'); // IE Fallback
src: url('../fonts/yourfont.otf');
// etc
}


Once you’re done loading up all your fonts its time to use them. To do this you simply apply them the same way you would normally use a font including any fallbacks.


div {
font-family: 'yourfont', sans-serif;
}


And that should do it. You are now able to use your fonts as you see fit.

Quick overview.

1. Upload the font
2. Add @font-face declarations fallbacks and check for local copy
3. Apply the font to your elements for use

This is a blog where I’ll take a fresh look at some concepts regarding graphic and web design. The purpose of this is two fold. One is to teach people that may be starting out a bit of the basics as I share my experiences. The other is to take another look at this concepts with more experienced eyes. Both of these reasons are selfish.

To be able to teach a thing you have to know it really well. As I want to learn more about some of the new things that are brewing in my field this helps to further motivate me and I invite you all to follow me along on my journey.