There’s nothing prettier to a website’s design than the use of good typography. We love making our websites sizzle with the help of well balanced fonts to improve the look & feel, as well as the functionality of our projects. For years print has ruled the world of typography and the web was stuck with either picking from the “web safe” fonts, or risking embedding the pretty fonts as images which really slowed things down (for everyone). Web Safe Fonts: Times, Helvetica, Arial, Verdana, Courier, Georgia, Tahoma, Lucida, and Impact.

With the help of the CSS3 @font-face rule these days of restriction are over. This CSS rule allows a web designer or programmer to embed any font they wish right into their website to use just as they would Arial or any other web safe font. There are guidelines and restrictions of course, but you can imagine our excitement about the possibilities that this created for us!

1. Setup the @font-face in your CSS

The first step is to pick your font you wish to embed, and be sure to check the license restrictions for publishing on the internet. We’re going to choose sample.ttf as our font of choice.

Upload the sample.ttf to your website (we usually have a folder for fonts to keep things tidy) so say it lives in /fonts/sample.ttf.

Write the following CSS:

@font-face{
     font-family: “Sample Font”;
     src: url(‘fonts/sample.ttf’);
}

h1{
      font-family: “Sample Font”, arial, serif;
}

So, in your HTML whenever you have an h1 it will come out in your embedded font. Easy enough, huh? There are a few other steps you’ll need to take to full-proof your @font-face rule. Remember, not all browsers and operating systems support the font extension .ttf so you’ll have to make sure you generate the same font in different formats first.

2. Using the @font-face Generator

Each browser supports their own font formats and we need to make sure that we don’t leave anyone out! The most common formats are: TTF and EOT (although there are others). Internet Explorer only supports EOT fonts, while Firefox, Chrome, and Safari will support TTF.

We’ll want to make sure we have 2 fonts:
     • sample.ttf
     • sample.eot

It’s our preference to use Font Squirrel’s @font-face generator because it’s fast, easy, and reliable. Remember, it’s your responsibility to check the license restrictions or to get permission to use these fonts for web embedding.

3. Modify your CSS to support all browsers

Now that you’ve generated the different font formats from Font Squirrel, you can just snag the TTF and the EOT files from the output. Upload them to the fonts folder that we created earlier, so you should have 2 fonts now.

@font-face{
     font-family: 'Sample Font';
     src: url('fonts/sample.eot'); /* IE9 Font */
     src: url('fonts/sample.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 Compatibility Font*/
     url('fonts/sample.ttf') format('truetype'), /* Modern Browsers: FF, Chrome, Safari Font */
}

h1{
      font-family: “Sample Font”, arial, serif;
}

Now your h1 should look correct with using the same font across all browsers! It’s been our experience that not all fonts embed the exact same. One of the common fixes is setting the font-weight: normal; but you can Google any specific issues.

4. Choosing good fall-back fonts

Whenever you do embed custom fonts using the @font-face CSS3 rule you need to make sure to choose fallback fonts in your CSS. It’s always best practice to know what pairs well with Sample Font so you can create the cascading fallback rules in your CSS.

Knowing if it’s Serif or Sans-Serif is usually a good rule of thumb to start. Also look into the font sizes, letter-space, font-weight, text-transform, and line-height to assist in your selection of web safe fallback fonts.

The fallback fonts are what we are declaring after the “Sample Font” in this example.

h1{
      font-family: “Sample Font”, arial, serif;
}

5. Final Notes

The @font-face rule is pretty sweet for when you are looking to embed any font on your website, but isn’t always the best option out there. There are other font service providers out there like: Google web fonts, Typekit, Fontdeck, and Cufon. There are limitations to these services like limited options on font styles / font weights / font selections, but they do have their advantages as well.

Remember to check with the license restrictions on embedding and distributing online. There are usually free alternative options if you look hard enough, but purchasing licenses are relatively cheap for the value of what you receive on the front end of your design.