Embedding Nice Fonts In Your Webpage With CSS3

You may have noticed in your causal browsing of the internet as of late that web pages are becoming more and more sophisticated in the fonts that they are all now using. It wasn’t too long ago that in order to have a snazzy looking font on your website that was not Arial, Verdana, Georgia, or Times New Roman, you essentially had to create an image of the header text or title text that you wanted to have display in a nice font. Since this was cumbersome and time consuming to do for all of your headers and titles (not to mention not being SEO friendly either), JavaScript based solutions like cufon were invented to solve the problem. But even tools like this tend to have their own drawbacks and small quirks. Cufon, for example, does not allow the user to highlight text.

Fortunately, it seems there is light at the end of the tunnel. Browsers now are increasingly supporting CSS3 and even browsers like older versions IE like IE7 have some level of CSS3 support. CSS3 adds additional functionality on top of its predecessor CSS2 and one of these functionalities is the ability to embed essentially any font that you want into your website!

Today I am going to show you how to embed nice looking fonts into your website using CSS3. For this tutorial I am going to use the Bebas Neue font, but it could work with any other font that you so choose. Note, however, that not all fonts look great at any size when they are embedded into a website. If you ever think that your font is looking jagged, aliased, or pixelated, try changing the size of the font by using the font-size CSS property. How to do this will become clearer as we move on in this tutorial.

Step 1: Get an @font-face kit

To start out, you’re going to have to get an @font-face kit. One great resource for this is Font Squirrel, but there are many others as well. You can download pre-made font face kits or, if you don’t find anything you like, you can create your own by uploading a nice looking font that you want to embed in your webpage.

Step 2: Add the @font-face kit to your website

The next thing you’re going to want to do is add the files in the @font-face kit to the files and folders that make up your website. I like to put the font files in a folder called “fonts” in the same directory as my CSS files (which we’ll be editing later). NOTE: I also sometimes change the files names of the font files to all lowercase for convention (e.g. bebasneue-webfont.eot). It really does not matter if you do this or not, just make sure that you get cases right when declaring the paths to fonts in the following step.

Step 3: Set your font in your CSS file

The next step is to declare the font in your CSS file. Open your stylesheet and in your CSS type out the following (based off of this technique) somewhere near the top….

@font-face {
font-family: 'Embedded';
src: url('fonts/bebasneue-webfont.eot?') format('eot'), url('fonts/bebasneue-webfont.woff') format('woff'), url('fonts/bebasneue-webfont.ttf') format('truetype');
}

This of course assumes that the font files in a folder called “fonts” in the same directory as the CSS files and that you changed the sames of the files to all lowercase. What you set as the name for your font-family does not matter. I like to give my font a generalized name in the CSS (e.g. “Embedded”). That way, all I have to do is change the paths to the font files if I decide to go back and change the embedded font in my website later.

Step 4: Set the font-family for all the elements you want to change the font for in your CSS

Your font is now ready to go. All you have to do is set the font-family for the various elements, ids, and classes you want to have display your newly embedded font. So, for example, to style all <h1> tags in our website with our new font, all we have to do is set the font-family to “Embedded” in our CSS like so…

h1 {
font-family:Embedded;
font-size:40px;
}

Now all text in between the <h1> tags in your website will be displayed in the Bebas Neue font.

You have been staring at an example of this in action the whole time you have been reading this tutorial. The fonts used for the header text and numerous other portions of text in the pages on this website make use of font embedding.

That should give you all you need to embed nice looking fonts into your webpage using CSS3. Happy embedding!

View Demo » Download Files »