Not long ago web developers were stuck using a specific subset of universal fonts on their websites. But times have changed!

Modern websites are discarding the generic universal fonts in place of their own. This is fantastic! The ability to use your own fonts on your web site is important, especially if your branding is centered around a specific look.

Adding custom fonts to your website is fairly simple! In this post, I will assume that you don’t have all the formats at your disposal, and assume that you just have the ttf (True Type Font) file available.

Step 1: Locate your font

There are tons of website that offer fonts for free. If you’re hard core you can make your own fonts! If you are able to export to multiple formats (eot, woff, svg, and ttf) than that’s great! If not, you can continue to the next steps.

Step 2: Convert ttf to multiple formats

Not all browsers will accept a ttf file to render a custom font. It is good practice to offer EOT (Embedded OpenType), WOFF (Web Open Font Format), SVG (Scalable Vector Graphics), and TTF. You can download utilities to convert TTF into these, or you can use free websites to do the work. EverythingFonts.com has some sweet converters you can use:

http://everythingfonts.com/ttf-to-eot

http://everythingfonts.com/ttf-to-woff

http://everythingfonts.com/ttf-to-svg

Step 3: Implement CSS

In your web site CSS just add these lines:

// Legacy IE Support
@font-face {
    font-family:MyCustomFont;
    src:url(/path/to/fonts/MyCustomFont.eot)
}

@font-face {
    font-family:MyCustomFont;
    src:
            url(/path/to/fonts/MyCustomFont.ttf) format("truetype"),
            url(/path/to/fonts/MyCustomFont.woff) format("woff"),
            url(/path/to/fonts/MyCustomFont.svg) format("svg")
}

.myfont {
    font-family:"MyCustomFont"
}

Step 4: Use it!

Now that your font is available you can use the ‘myfont’ class to implement it with your HTML elements. For example:

<span class="myfont">This is my font!</span>