CSS3 Tutorial 6: Using Custom Fonts

In CSS3 you can specify the use of custom fonts. It doesn't matter if the person viewing the page doesn't have the font installed, You simply host the font online and use @font-face in your CSS to link to it! The code that you use is this:

@font-face {
font-family: [Custom font name];
src: url('[url to font]');
}

You can't use any fonts though, you have to use a special font format, You can generate them at http://cufon.shoqolate.com/generate/. To implement the new font you would use font-family like this:

h1 {
font-family: [CustomFontName], Arial;
}

Arial is there in case someone is using an outdated browser that doesn't support @font-face such as Internet Explorer. .otf format fonts are the most widely supported; It is supported by all browsers except Internet Explorer and Safari on the iPhone, You can use @font-face multiple times in your CSS document so you should also include .eot and .svg versions of the same font in your CSS so it is compatible with all browsers.