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

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

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></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>

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. The best resource by far is Google Web Fonts.

Newsletter

My best content on Front End Design & Development. More CSS, Bootstrap, and freelance tutorials delivered directly to your inbox.



No spam, ever. Subscribe for my best content and freebies.

10 Comments

Opinons welcome, keep it clean.

Leave a comment
  1. Awesome job mate, really usefull thanks for share it.

    Cheers.

  2. no prob, thanks for reading

  3. Hi,

    I’m learning CSS3. Your all tutorials are very helpful.

  4. awesome! I plan to post some new ones soon.

  5. Max

    how about aller? are we allowed to use this font for @font-face? thanks and keep it up!

  6. Yep, you can use aller, it’s a free font

  7. You should had includ aller .otf as well for IE users. Or the font wont be rendered. Apart from that simple and well explain @font-face embembed

  8. Hey, check the browser support note at the top. As far as I know, IE doesn’t support any of this custom font css at this point. thanks

Trackbacks for this post

  1. CSS3 Typography and Special Effects | AEXT.NET MAGAZINE
  2. Best Tutorials for Web Development » Blog Archive » What CSS3 Can Do For You: Typography and Special Effects

Leave a Comment

Opinons welcome, keep it clean.