{Web Space Tutorials}

good tutorials, made easy

Web Fonts - @font-face


Until now web designers were severely limited in the font category. Only fonts that are installed on the user's machine will show up on the web; meaning we could only use basic fonts that are guaranteed to be installed on every computer. Well the new @font-face style does away with all that.

@font-face allows fonts to be embedded into a web page, meaning that if set up properly, you can now use any font you want on your site! The down side? The fonts you use must be licensed by you, or free for everyone to use. Even so web fonts are a power full tool for us web designers.


For this tutorial it is recommended that you have:

What @font-face does for us

The @font-face is a css style that will allow us web designers to use any font we want on a web page. This is great because up to now we were limited in our font choices. up until now if we wanted to show text in a different font on a page we had to use an background image, but this is bad for search engine optimization.

There were ways around this, but they are overly complicated for a simple problem. The @font-face style does away with all that and allows us to use whatever font we want.


One problem that always comes with freedom on the web, is the law. In order to use a font, you must have the license to use it. Basic fonts that are installed on every machine are free for everyone to use, but this is not true for every font on the web. Even so, there are tons of free fonts for those who don't want to purchase new fonts. Just be care full and make sure the font your using is ok to be used.

How it works

Okay enough with the introductions, so how exactly does @font-face work? It's actually very simple to use @font-face, you simply include a rule in your style sheet, and reference to the font files almost as you would an image:

@font-face {
font-family: DeliciousRoman;
src: url('../fonts/Delicious-Roman.otf');

Then, if you want the font to appear in the H1, for example, use:

h1 {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;

Always remember to add in backup fonts, just to be safe.

Next is to add the font to your web server. Make sure to add all versions of your font, .otf, .eot, .woff, .ttf, .sag. All of these versions are needed in order for the font to display in all browsers. Notice how in my example, the font url points to a specific fonts folder, organization is always a good thing.


Now that you've read the tutorial, take the quiz.