Scott Fegette |
Sunday, June 29, 2014
Fonts used to be limited in number and flexibility for web designers. Those days are over. Although web typography still isn’t perfect, support for rich browser-based typography is comprehensive enough to stop waiting. It’s time to make your site’s text as beautiful as its layout and design by learning how to use web fonts in your designs.
Web fonts used to be limited to just a few standard choices for which all the common web browsers provided support. The font tag, introduced in 1995 by Netscape, wrapped around a block of text and let you use fonts on your local machine along with “fallback” fonts (shown if your first choice of font isn’t available on another person’s browsing machine). More often than not, though, you ended up designing around those fallback fonts if your primary choices were anything other than the blessed set of “browser-safe” fonts. Even worse, the font element required you to wrap all your HTML content with invasive markup, needlessly intertwining content and design, and making site redesigns and content updates a nightmare.
Fortunately, the CSS (Cascading Style Sheet) spec came to include the @font-face property, which allows you to not only specify non-standard fonts for use in your web pages and applications, but to load fonts remotely and provide a consistent typographic experience to everyone with a modern browser. For years the @font-face implementation across browsers had inconsistencies, but best practices today have stabilized to a point where it’s easy to rely on rich typography in your web design.
src: url(‘fonts/foobar.woff’) format(‘woff’),
src: url('fonts/foobar.ttf') format('truetype');
In the code above, the font-family declaration sets a name for the font that you can use throughout your CSS rules, and the src declaration points to the font file on the server. You may notice multiple src lines with different font files- allowing you to specify more than one font format to make sure you’re compatible with the browsers (and their varying font support) that will be viewing your content. The browser reading this code will simply try to load the first font file in the list, and if it doesn’t support it, will move down the list until it finds a font format it can read. Simple!
Now that your custom font has been declared, you can refer to it in CSS rules as you would any other font. For example, this code snippet applies our ‘Foobar’ font as the default body copy font– and if that fails, then falls back to first a backup (browser-safe) choice, then to a general sans-serif font.
font-family: 'Foobar', MyBackupFont, sans-serif;
That’s it- you’re off and running!
The @font-face example above contains references to both WOFF and TTF format fonts, which form an increasingly-safe typographic foundation that reaches the broadest variety of browsers in the simplest fashion. However, there are several other font formats to consider if you want to really guarantee a consistent experience, even for older and alternate browsers that may not support the newer standards. Each has pros and cons.
Providing a bulletproof experience for the widest number of viewers requires a little more work, however. You’ll need to provide additional src definitions to more than one font file to allow these different font formats to support each other and provide a solution for nearly anyone who’s visiting your site. Here’s an expanded version of the basic @font-face declaration above, which provides a more solid foundation by adding EOT and SVG versions of our fictitious Foobar font to the stack:
src: url('foobar.woff') format('woff'),
Now that you know how to use web fonts … should you? It’s important to make sure you have rights to actually host that font file on your server—as once you do, you’ve essentially provided it for anyone to download. Be sure to check your license agreement for any fonts you’ve purchased to make sure they allow you to use them on hosted websites! This consideration alone may have you looking for a more flexible, simple option. Many online type foundries and vendors sell (and/or offer for free!) web fonts that are licensed for use on public-facing web projects. Here are a few to consider:
Keep in mind that even if you do have a license for using a particular font, you will also have to serve it to site visitors along with your site’s images, embedded media and graphics- so bandwidth can become a concern. If so, then a hosted font service that not just provides the font – but also hosts and delivers it to your viewers’ browsers – could be just what you’re looking for.
If the amount of code juggling and potential font licensing issues is stalling you from using rich typography on your web projects—or even if you just want more flexible, simple options for web fonts—you should consider subscribing to a font service like Adobe’s Typekit. With both free and paid options available, font-hosting services not only provide you with the links to the licensed font files on their server (so you won’t pay for bandwidth in serving the font files directly), but usually also let you define and include them in your CSS in a robust, cross-browser way. Here are some popular font services to consider.
Now that you know the history and current state of web typography, are you ready to get started? Watch Laura Franz’ course Choosing and Using Web Fonts on lynda.com to dive in and start exploring your new design possibilities. See James Williamson’s Up and Running with Typekit to get a hands-on look at the benefits of hosted font services. And take a look at Val Head’s Responsive Typography Techniques to make your typography look beautiful regardless of the device used to view it.
Tags: CSS, Fonts, Scott Fegette, Typography, Web Design, Web Fonts
Check out these popular Web courses.
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.