You have to have the legal rights to publish fonts on a server and there are a number of complexities to hosting fonts in all of the formats you’ll need for them to work in all of the different web browsers out there. For all those reasons, most web designers turn to a hosted font site, or to a site that provides complete font kits.
You’ll find fonts ready for use with the @font-face rule in CSS3 at all four of these websites. Just search through the collections, copy the corresponding font link into your web page, and voila!
- Typekit.com: Acquired by Adobe in 2011, Typekit offers a wide-range of professional-quality fonts.
- FontSquirrel.com: FontSquirrel.com provides a collection of free fonts upload to their server where you can access them easily (and legally).
- FontSpring.com: Is a kind of clearing house that bundles the online and offline use of fonts and provides a premium service with reasonably priced font collections you can use across printed and digital materials.
- The Google Font Directory has a limited list of fonts, but Google makes it easy to use them. Just copy a little code from the Google site to yours and you can use any of their fonts in your styles.
No matter where you get your fonts, the steps in this tutorial will help you combine the links to these fonts with the CSS you use in your web pages.