Are you tired of web-safe fonts? Do you want to try some new fonts and give your site a breath of freshness? You’ve come to the right place!

@font-face usage

You have heard probably a lot about @font-face embedding. Here is a quick explanation what is all about. @font-face embedding allows you to use non-standard fonts in your web sites without hacks, like SIFR or Cufon font replacements.

First you need to get or generate @font-face kit. The FontSquirrel has a ton of prepared font kits that are ready to use. Beside that, you can generate font kits from your own fonts.

After your preferred font is ready, you will need to use @font-face css rule. Here is an quick example how you can insert PT Sans font:

Now the font is available, so all you need is to use your css selectors to apply new font.

If the browser doesn’t support @font-face rule, it will use Arial or other sans-serif that is available. Check below for a list of browsers that support @font-face rule.

Please note that the font you use must reside on your server and it’s publicly available for download, so you must be sure that the font is allowed for font-embedding.

@font-face browser support

To be sure that the users will see your design as you wanted, you need to be aware which browsers support @font-face css rule. Here is a short list of browsers that have support for @font-face rule.

• Firefox 3.5 or higher – supports TTF, OTF and WOFF font formats
• Internet Explorer 4 or higher – supports EOT font format
• Google Chrome 4 or higher
• Safari 3.1 or higher – supports TTF and OTF font formats
• Opera 10 or higher – supports TTF, OTF and SVG font formats

PT Sans by ParaType

PT Sans by ParaType

Franchise by Weathersbee Type

Franchise by Weathersbee Type

Museo Slab by Exljbris

Museo Slab by Exljbris

Lane Narrow by GemFonts

Lane by GemFonts

Tuffy by Thatcher Ulrich

Tuffy by Thatcher Urlich