Hosted Custom Fonts

We all love working with design agencies because they are the creative folk who love colours and layouts and fonts. Historically, if we were given one of their non-Windows/Mac fonts, we needed to install the font on our system, create an image using that font and then code some image replacement in the layout. Then the client wanted a different background colour on that image so we need to make that change and iterate again. Also, images use bandwidth and we like to keep our sites as lean as possible. Phew, I'm tired just thinking about it!

Nowadays, we can embed fonts which lets us use those crazy fonts without having to create images to preserve the font styles. We can actually reference them in our CSS just as if it was installed on the browser's system. I generally have a font.css in my solution in which I define all my embedded fonts and then I import that file into my global.css file. It just keeps things separate.

Let's say we have been given a font called HeyJude.ttf. We want to use this font in a nav element in our site, but we can be pretty sure that 99% of users will not have this font installed on their system.

Just put the HeyJude.ttf file somewhere in your website and reference it. The syntax is kind of like referencing an image.

@font-face {
    font-family: "Hey Jude";
    font-style: normal;
    font-weight: 400;
    src: url("HeyJude.ttf");
}

This will work a treat in most modern browsers, except Internet Explorer. To make this work in more browsers, we need to convert the font file into a different format, and then reference it in the same way. This format is called EOT which is an Embedded OpenType font. I use www.Kirsle.net because it's quick and easy and they give good instructions on how to structure your CSS code using the file information. Just upload the TTF file, and this site will convert it and give you a link to download the EOT file. You download the EOT file and put it in the same place as your TTF file. Your new fonts.css file now looks like this.

@font-face {
    font-family: "Hey Jude";
    font-style: normal;
    font-weight: 400;
    src: url("heyjude.eot"); /* EOT file for IE */
}
@font-face {
    font-family: "Hey Jude";
    font-style: normal;
    font-weight: 400;
    src: url("heyjude.ttf"); /* TTF file for CSS3 browsers */
}

Then, when you want to use this font in your CSS, just reference it in the same way you normally would.

nav li a 
{
	display: block;
	padding: 15px 15px 2px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #514a47;
	font-family: "Hey Jude", Arial, Sans-Serif;
}

As a side note, Paul Irish has some more to say on this subject. Make sure you check out his blog after you have read this article - http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/.

Til next time...