banzaidesign.nl

For my internship I was looking around to see if there were any good solutions to putting up custom fonts. Since it used to be quite impossible to use any other fonts than the standard collection, I was hoping that the recent developments in the HTML/CSS world brought change.

Well.. they did. But not in this manner. As it turns out, this solution actually works great in any browser, regardless of CSS3 support!

A situation

Say I’ve designed a nice looking website, disregarding the fonts that are usually found around the web. I wanted a nice thick serif font, so I decided upon the Slab Serif font ChunkFive. The site I’m linking to there is FontSquirrel, in my opinion the best source for free commercial-use fonts.

Basically you can use any font on these sites for all of your personal and/or commercial projects as long as you do not modify the font-files themselves.

The beauty of FontSquirrel is that it allows you to generate so-called @font-face kits, which are basically completely ready files with the coding already done for you. Here are the steps you need to go through in generating these tags:

You will end up with a .zip file containing the various font files and a css stylesheet. You’ll want to upload the following files to your ftp:

Now it’s time to open up the ’stylesheet.css’ file in your favorite CSS editor. Here’s what it’s contents look like:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2010 11:58:46 AM America/New_York */

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive-webfont.eot');
	src: local('☺'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

How this code works: On the first line it defines the name of the font, which you can you on the other elements as a regular font.

On the next two lines, it defines where all the fonts are located, starting with the eot (for Internet Explorer 6/7/8/9), the woff (Web Open Font Format, which is mainly used in newer browsers, like Firefox 3.6), the svg format (which is needed for Chrome support, since that won’t support TTF or OTF until v4 is publicly released) and lastly OTF (The usual font, that is adopted by many browsers).

Lastly it resets the font styling by setting the weight and style to normal. This is to avoid it from being deformed by making it bold with CSS. For these fonts, it’s better to use the bold version of the font, because that will always make it look better.

What I usually like to do with this code is get it out of this file and place it in a separate fonts.css file, which will contain all my font-face tags. The reason I’m keeping it separate is, it keeps my ‘regular’ css file well ordered and I’m still able to call upon these fonts in the regular css-file.

Here’s a shot of my fonts.css file I’ve used on this site:

As you might be able to see, I’ve placed the font files in here in a separate folder with the name ‘fonts’, purely to keep it all clean and organized. When you look at my normal css file, this is an example of code I’m using there to style the header tags:

.post-content h2.post-title{
	font-family: 'BebasRegular'; 
	color:white; 
	font-weight:normal; 
	font-size:21px;
	}

As you can see here, I’m using exactly the same font-family link as is specified in the file I got from Fontsquirrel. I’m resetting the font-weight again, since h2-tags have the tendency to set it back to bold. I have full control of the rest of the styling, I could even add all of those shiny new CSS3 effects, like text-shadow!

Implementing other fonts

It’s possible that your favorite font is not available on font-squirrel. Maybe it was never submitted there by the author or it’s not usually commercially/freely available. In that case we need a way to embed these fonts ourselves and make sure they work in other browsers too!

The bulletproof method

Since it can be quite tricky to figure out a way to do this yourselve and there are a ton of options out there, I’ve looked around the web and I’ve found the perfect method: Paul Irish’s Bulletproof @font-face. This also happens to be the method that FontSquirrel uses to generate the font-face packs. Here’s the entire code.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

But I don’t have this format!

What’s that? You don’t have all of files? (eot, woff, otf, svg) No problem. As long as you have a single version of your font (it doens’t matter which one) and use this OnlineFontConverter, you’ll convert them with great ease! No registration is required either, you can just click ’skip registration’ in the middle down below.

Closing Thoughts

I really like where the font-face scene is going and I’m glad there is so much support thanks to sites like FontSquirrel, that really help to keep it all alive! Thank you for reading and here are some of my personal favorites!