Web fonts support your online brandAs a designer, being able to incorporate the best typography into your website is crucial. Similar to every other design element on a website, type plays a huge role in setting the tone and personality of a website. Only until recently have designers been able to branch out of the “web safe” font realm and experiment with new typography. Web fonts can help brands refine their digital web presence and support user experience. As semantic markup becomes more and more important to SEO rankings and browser compatibility, embedding fonts in images becomes obsolete, making way for live text.
There are several methods to follow for serving up a web fonts, including CSS@font-face, Google Fonts, Typekit, and a handful of other services. Here's a bit more about the three most popular options for integrating and using web fonts:
CSS @font-faceThis CSS property is a CSS rule that allows a designer to specify online fonts, rather than depending on pre-installed fonts on the user's computer. This option is free and gives designers a wide range of fonts to choose from when creating their designs. Learn more about CSS @font-face.
Google FontsOpen source, free, and fast delivery—this web font service tends to be faster than the others, but it only includes a limited collection of fonts. Learn more about Google Fonts.
TypekitTypekit is another free web font service (with option to subscribe for more fonts) that allows designers to choose from hundreds of fonts. The main draw back is that their a free subscription only allows users to access a few fonts at a time.
Some examples of web fonts at work—
|Chipotle's website exhibits a fresh, fun, and natural experience by using a webfont that reflects their personality.|
|Moleskine.com webfonts gives the website a clean and minimalist feel. Thin, clean, and light type sets the tone.|
|Postable.com exhibits a fun and personable web experience via the typography.|
|Readmill, an e-reader application, reflects a site that is clean and simple, much like a hard-bound book.|