MA UK Design, Web Design and Graphic Design, LondonStatus: Currently accepting projects

How to Utilize the Power of Custom Web Fonts with @font face

@ Font Face is the simplest method for Web Designers to use their own fonts within web pages. Its appeal compared to its closest competitors such as Cufon, is in its ease of use and implementation, cross-browser compatibility, and minimal code. So how do you go about using @Font Face? Shown below is the basic syntax for using @Font Face within a web page. The font is specified in the CSS:

 
@font-face {
	font-family: Chunkfive;
	src: url('Chunkfive.otf');
}

You should idealy create a directory within you site’s root folder or theme folder containing the file. You then reference the font family (along with fallbacks, of course) in any style you choose, for example:

#Main_Title{
font-family: Chunkfive, Tahoma, sans-serif;
src: url(fonts/Featured-Item.otf);
 
<p id="Main_Title">Hello World!</p>

Cross-Browser Compatibility

@ Font Face suffers from minimal cross-browser compatibility issues. However, it’s worth noting that each browser only supports certain font formats:

Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.

But using Bullet Proof’s @ Font Face Syntax within your CSS file, you can utilize @ Font Face across multiple browsers effectively without worrying about what your font is going to look like. The only catch is, you would need to download each format. More on that later. Below is Bullet Proof’s Syntax taken from his website:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

How to get the formats you need

This is the easy bit, and can be accomplished using a simple program called @font-face Kit Generator:

Simply upload your font to the generator, and specify the formats that you’d like (corresponding to each individual browser). It’s then a simple case of referencing each format in your CSS as illustrated in Bullet Proof’s Syntax, and you are good to go. Below are some great sources for Web Fonts:

Google Font API allows you to choose custom fonts from the Google Font Directory. Once you’ve chosen the font you want, you can then proceed to your CSS, and unleash the power of @Font-Face in your future web designs.

Pretty awesome, right?

• Date | January 29, 2012 Tweet