3 Ways to Use Webfonts in Your Website Design
One of the most aesthetically rewarding advancements of internet technology in recent years, is the ability to use specially selected fonts in a website.
Just a few years ago, to achieve this effect, web designers needed to create an image for each piece of text that wasn’t Arial, Helvetica, Times New Roman, or one of other highly standard fonts already installed on the majority of users’ computers. But today, designers have the freedom to use any of thousands of fonts available for website display.
There are three main ways to serve non-standard fonts:
- Purchase a regular desktop font, first making sure the license agreement permits usage on the web. Use a generator service to convert the font to all the formats you will need for cross-browser support (EOT, WOFF, TTF or OTF, SVG). Then, upload the files to your server and link to them from your style sheets. There are multiple services for this, but we highly recommended the @font-face generator from Font Squirrel.
- Purchase font files that have already been packaged in the necessary formats for the web. Webfonts are available from popular sites like: fonts.com, fontdeck.com, webtype.com, typekit.com, among many others.
- Use a provider — sometimes known as a Web Font Service Bureau — that offers hosted, licensed webfonts. These sets of fonts are prepped for browser display and hosted by the provider. In using this type of service, you don’t get to own the font or retain a copy locally; it is considered a leasing arrangement. This saves you worrying about the legality of your fonts, and ensures cross-browser compatibility. One of the main drawbacks to this option is that because you don’t own the font outright, you’re required to purchase it separately for use when designing locally with Photoshop, or using the font in print pieces.These are a few of our favorite webfont resources:
- Google has hundreds of free fonts available as a service.
- Fonts.com has thousands of free fonts available, but the free library is limited to 25,000 users per month, and requires affixing a small site badge to your website.
- Typekit (by Adobe) does not offer free fonts; however, they do sell subscriptions for as low as $2 per month.
- Adobe Edge has free webfonts to use, served by Typekit (but many are also available directly from Google Fonts).
- MyFonts claims to be the world’s largest collection of fonts, offering a few free fonts, but most are available for a fee.