CSS3: Custom Fonts using font-face

font-face in css

Let me start by saying that I am not a designer, so this feature didn’t mean much to me; however, when we told designers that they can start using custom fonts – they want ape @$!# for it.

Over the years it has been mentioned countless times how little time you have to capture a person’s attention on your website. Often times this can be done with flashy or enticing designs. With this comes increased download times – slowing the page load down. Also, many web hosting providers supply a limited bandwidth or charge per GB. Flashy or enticing designs can be costly in both the bandwidth and page load times.

With the ability to embed fonts with CSS3, us web developers, can start pleasing our designers by embedding their custom fonts in the website and stop using images to achieve the same affect.

CSS @font-face

To enable the @font-face you must first copy the TrueType (.ttf) or OpenType (.otf) font file into a directory on your website. For example, includes or scripts directory. Once this file is included within your website, you can now alter your CSS to include a reference to it. In the following example, all <h1> tags will use the Algerian TrueType font:

[code]
<style type=”text/css”>
@font-face {
font-family: ‘AlgerianRegular’;
src: url(‘ALGER.ttf’) format(“truetype”);
}

h1 {
font-family: ‘AlgerianRegular’;
font-size: 18px;
}
</style>
[/code]

css font-face

If you are trying this example on your own in Internet Explorer, you might notice the above text doesn’t look like the Algerian font. The reason being the above example is unfortunately too simple and doesn’t currently work in Internet Explorer.

So, if you are unable to get your TrueType or OpenType fonts to work with Internet Explorer, I suggest using this tool provided by the Font Squirrel. On this page, you upload the font file you have and it will generate a toolkit for you.

Using the example above, when the toolkit was generated for the Algerian font, I ended up with the following files:

alger-webfont.eot

alger-webfont.svg

alger-webfont.ttf

alger-webfont.woff

If you now replace the existing ttf file with these files and update your existing @font-face CSS you will have a working custom font in all browsers:

[code]
@font-face {
font-family: ‘AlgerianRegular’;
src: url(‘alger-webfont.eot’);
src: url(‘alger-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘alger-webfont.woff’) format(‘woff’),
url(‘alger-webfont.ttf’) format(‘truetype’),
url(‘alger-webfont.svg#AlgerianRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/code]

Now, our Internet Explorer friends should see this paragraph in the Algerian font.

With the use of the @font-face tag, developers can help please our designer friends and achieve their pretty designs while we developers can still help to ensure quick page load times without the heavy weight of images!