You are here: Home » Blog » Tutorials » Quick Tip: How To Use Your Favorite Font In Your Website?

Let me introduce you to the best way to do your @font-face definitions, and you can start using your most favorite font type in your website!

I know the first thing that comes to your mind is:

“Will my browser support it?”
“Will anyone see my font type even if they don’t have the font installed on their computer?”
“What about licensing?
“Do I need extra script to make this work?”

I do believe that you should forget about all the “question” first and start to learn how this things is done and later on then you decide. This wont take much of your time so let us proceed.

Before we begin, just to let you know that an IE browser doesn’t support of use any .ttf or .otf font type. What IE needs is .eot. Other browsers must take a .ttf or .otf.

The best possible solution for both IE and Firefox user

@font-face {
font-family: 'AniversRegular';
src: url('font/Anivers_Regular.eot');
src: local('Anivers Regular'), local('Anivers-Regular'),
    url('font/Anivers_Regular.otf') format('opentype');
}

Notice the difference in font format. We have .eot and .otf. Why do we have all this different format in this declaration?

Internet Explorer has its own method and they prefer to use the .eot method. They will not even response to the opentype or the truetype method, if you are using .ttf font format here. So, we have to make sure that we load the .eot font format first in order to make sure IE will not load all the other font format that will lead to bandwidth wastage.

How do we make sure IE wont load the .otf or the .ttf font format?

Here, non-IE browsers skip any .eot file and move on. IE will try to parse the second src value, but it can’t understand the local() location nor the multiple locations, so it resorts to the EOT instead.

Quote from Paul Irish

IE browser does not understand all the commas and the local() declaration, so it will skip that line completely and it will only render the .eot file format (code line #3).

Why do we have extra font name declaration?

src: local('Anivers Regular'), local('Anivers-Regular'),
    url('font/Anivers_Regular.otf') format('opentype');

The first local declaration “local(‘Anivers Regular’)” will find the existing font type in the user local computer and load that. If it can’t find that, then it will execute the second selection which is the “local(‘Anivers-Regular’)“, just in case they have a different name in the user’s PC. The last resort, it will load the font that we have included in our website.

How to use it?

h1 { font: 32px 'Anivers','AniversRegular',Georgia, sans-serif; }

The first declaration, “Anivers” is going to find if the font exist in the user’s computer. The second one “AniversRegular” will load our favorite font that we’ve declared earlier, and when everything else went wrong, the backup font type will be loaded which is “Georgia” or “sans-serif”.

One Response so far.

1. Edward says:

   09 March, 2010 at 3:29 PM

   Cool tips! I think I will use this method instead of the JS method!