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!
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.
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