Today, I'll show you how you can embed custom fonts into your website.

We're going to do that via the CSS3.0 rule @font-face. This only works in Firefox/Safari/Opera/Chrome/+ other more modern browsers. IE7/8, unfortunately, do not qualify for "modern" status, however as long as you declare some default general fonts after your custom font, then IE won't really have an issue rendering the "other" default fonts. If you absolutely must give IE the same custom font, you can use the .eot font-types that IE can read.

This is the chunk of code that you need:

@font-face { /* declare fonts */
	font-family: "MuseoLight";
	src: url("fonts/Museo300-Regular.eot");
	src: local("Museo 300"), local("Museo-300"),
		url("./../fonts/Museo300-Regular.woff") format("woff"),
		url("./../fonts/Museo300-Regular.otf") format("opentype"),
		url("./../fonts/Museo300-Regular.svg#Museo-300") format("svg");
		}
		/* display fonts */
		h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
		h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
		h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

This pathing assumes that you have a CSS folder where you have your stylesheet, and a fonts folder where you use your custom fonts.

For a good web converter of fonts, I highly recommend Font Squirrel | Create Your Own @font-face Kits -- it's very reliable, and they even give you the CSS you'll need to copy. So, no need to muck around with the above code too much, but it helps to understand what it actually does.

Basically, the above chunk of code checks the server (your website) for the custom fonts and then loads and applies them to the requested elements. There are multiple fonts because each browser had the awesome idea of only rendering their own fonts; IE has the .eot fonts, .woff is for Firefox/Gecko browsers, .otf is for Safari/Chrome, and #svg is for basically any browser that supports svg-fonts... so you'll need all of them if you have to have some sort of consistent results via multiple browsers.

That's about all for this week. Stay tuned for more!