Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

Using CSS3 font-face To Add Custom Fonts To Your Website

March 12th, 2010

One of the biggest features in CSS3 is the ability to use custom fonts in your web designs. In this tutorial, I’ll show you how to do just that using the free font Aller Display. Once you have downloaded the file, upload it to your server and note the location.

Live Demo

Browser Support

Currently these styles are supported by Safari, Firefox, Chrome, and Opera.

Here’s What The CSS Looks Like

The first step is to setup the @font-face selector with the font you want to use. For this example, I’m using the free font Aller Display. The font-family property declares the name/value for your custom font. The src property is the link to the font file on your server, which you have already uploaded.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

Now we’ll setup it up so every <div> in your document will use Aller Display. Make sure the font-family value matches the one you setup under the @font-face selector. In this case it is aller-display.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

div {
 font-family: aller-display;
 font-size: 2em;
}

Adding the HTML

The last thing we need to do is add the HTML, which is pretty basic.

<div>this is a custom font named aller display</div>

Here’s What It Looks Like

A Word On Copyright

Make sure you check the license for a font before you use it. Many fonts are not currently licensed for web use. The safest policy is to just use free fonts. There’s a great collection over at dafont.com.

Support Files

That’s it, that’s all. Check out the live demo and download the source files below.

Live Demo

Download Source Files

Tags: css3, custom, font, font-face, type, typography