Web Fonts (@font-face)

written by e on 03.30.2012 @ 11:40 am in CSS, Web Fonts

I wanted to replace the left hand menu header images with CSS-based fonts (web fonts =
eot, WOFF, ttf and svg) to implement media queries and to follow best practices.  In addition, now we can use fonts which aren’t natively on a user’s device, allowing for a more unique feel to the site. To learn about all the new web font standards, head over here and read up on it.

A great resource to find free web fonts is fontsquirrel. They also have a nifty generator to help you get started.

Follow these steps to start taking advantage of the new web fonts standard…

• Upload your web fonts to your site
• Add @font-face declarations to your stylesheet

  Using the @font-face CSS declaration correctly (multiple srcs) allows the various browsers to select the appropriate font without causing you a bunch of headaches or extra code. You can learn more about this syntax by reading the Fontspring blog post on it.

  The code for it is as follows:

  @font-face{
  	font-family: 'CoolFont';
  	src: url('CoolFont.eot');
  	src: url('CoolFont.eot?#iefix') format('embedded-opentype'),
  		url('CoolFont.woff') format('woff'),
  		url('CoolFont.ttf') format('truetype'),
  		url('CoolFont.svg#webfont') format('svg');
  }
  

• Reference web fonts in your CSS

  Now comes the easy part, referencing the new font declaration from above. Just as you would normally define which fonts to use through CSS, you can now reference your custom web font via its font-family attribute.

  Example:

  p { font-family: 'CoolFont', Arial, sans-serif; }