Adding Custom Type to Your Site

Hopefully you can all see the typographical changes I’ve made here to my site; it was really easy to do, and here’s how you can incorporate custom typefaces to your site.

Before we get into the how-to portion, here’s how the code will look on your stylesheet:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

Simple enough- it’s basically assigning a name to your custom typeface, and telling your stylesheet where it’s located. You can duplicate this code and use as many typefaces as you wish, as long as you specify new names ("Your typeface") for each one.

Anyway, pick out the typeface you wish to use, then head on over to Font Squirrel’s @font-face generator. Upload your typefaces, download the kit that Font Squirrel generates, install the CSS code, and you’re all set!

A very helpful tutorial can also be found at Nice Web Type.