@font-face, what is it? And why use it?

by krike in Other / Tutorials on 04 Dec 2010

what is @font-face?

@font-face is a new way of embedding custom fonts on your site, to my opinion it’s much better to use and implement then cufon or sifr. what makes it so great is that it is supported by most of the major browser (at least the latest version of each browsers). it’s not running on javascript so it works perfectly with javascript turned off.

Why use it?

  • it’s easy to implement and use
  • it does not depend on javascript
  • it is supported by the major browsers

How to use it?

  • Download a font face kit on your computer
  • Extract the downloaded zip
  • Include your fonts in your webproject
  • Add the font-face css code at the top of your stylesheet (make sure to set the paths to your fonts correctly)
  • Add the font-family attribute with the new font as value

ute to your css style with the custom font as value (and other fonts as fallback)

…. and that’s it! … really? … yes thats really all you need to do šŸ™‚ pretty cool, isn’t it?


not convinced yet? why don’t you have a look at fontsquirrel, they have ready to use @font-face kits that you can download. Even better, if you have a TTF font (and made sure you are allowed to embed that font) you can the use their @font-face kit generator wich will generate the css code for you and convert your font to the other required formats for browser compatibility.


a simple, easy way to embed fonts with little effort and no headaches.

Written by krike

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet nisl nisl. Ut interdum libero vitae quam ultricies et lacinia elit aliquet. Praesent tincidunt, sem tempus feugiat feugiat, turpis tellus scelerisque erat, sit amet feugiat neque arcu ac lectus. Sed at mi et elit interdum scelerisque vitae eu felis.

krike has written 77 posts.