The Problem with Web Fonts

The problem with web fonts is that nobody wants to use the ‘safe’ fonts and you need as much live text on your site as possible. So what’s a designer to do? Fortunately or unfortunately there are plenty of options. Unique fonts are awesome and up until a year or two ago the only way […]

The problem with web fonts is that nobody wants to use the ‘safe’ fonts and you need as much live text on your site as possible. So what’s a designer to do? Fortunately or unfortunately there are plenty of options.

Unique fonts are awesome and up until a year or two ago the only way to accomplish unique typography was to embed them in images on your site. As semantic markup becomes more important to browser compatibility and search engine rankings, live text is more and more important also.

This means that we need to master the art of web fonts and how to get them to render correctly. There is no one real rock-solid sure fire way to present unique fonts yet, but there are a lot of methods you can use to accomplish unique active type. I have tried a few different methods, but my favorites are:

@font-face

The CSS technique, @font-face, for embedding fonts into your website has been around since CSS2. The reason why its not the great fix for web fonts is that fonts are rendered differently in browsers and operating systems. Helvetica may render perfect on a Mac but look jagged and weird on a Windows PC. To be able to use @font-face correctly, you’ll need to embed fonts that are designed to be rendered correctly no matter the browser or operating system.

Proper @font-face fonts come in two flavors; free and premium. There are a lot of free web font sites that offer quality web fonts ready to be embedded in your design. But, if you looking for very high quality and familiar web fonts it will cost you, rightly so.

Implementation

Implementing @font-face in your style sheet is really easy. Just download your chosen font, add it to your file system and add this chunk of code to your style sheet and reference the embedded font via the font-family property:

@font-face{font-family: Quicksand; src: url('Quicksand.otf');}
h3{font-family: "Quicksand", Gil Sans, arial, sans-serif;}

Resources

The best website to find quality free web safe fonts to use with the @font-face property is fontsquirrel.com. But if you are interested in premium fonts check out these sites:

The Pros and Cons

Pros:

  • Quality fonts – no weird rendering problems
  • A couple lines of code
  • No third party tools or apps

Cons:

  • No free licensed standard fonts
  • You must host the font
  • Still some font-weight rendering issues in some browsers

Google Fonts and Kernest

Another great option for adding unique fonts to your design is allowing someone else to handle the license and hosting for you. The two best options for this are the Google fonts API and Kernest. These services are great for web fonts because they take care of all the work for you and they are free. Wahoo! Well, not exactly, there are some on Kernest that require purchase, but most are free.

There is no need to download and host a font, no need to add extra code, and there is no need to worry about whether these fonts render correctly. The only real downside to this method is that their font libraries are still a bit small, but growing day by day.

Implementation

All you have to do is find the font you like from the gallery, copy the embed link and add it to the head of your HTML document. Then you can access the font via the font-family property in your style sheet:

<head>
<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
<style>
h1 { font-family: 'Calligraffitti', arial, serif; }
</style>
</head>

The Pros and Cons

Pros:

  • No – or little – cost
  • No download or hosting of font files
  • Minimal rendering issues

Cons:

  • Small libraries
  • Lack of real high-quality standard fonts

Font Stacks

Font stacks aren’t dead, they are alive and well – and a great alternative if you are looking for unique or standard fonts. In the majority of cases you don’t need some crazy ultra custom font for a web design, and with Apple, Microsoft and Linux adding more fonts to their core libraries, the font stack option can still be a very viable alternative for presenting type on the web. But to tap into these fonts, we’ll need to know how to build a good, solid font stack – or ‘borrow‘ one from somebody else.

Implementation

Building a font stack is pretty simple. A font stack is just basically a list of fonts that you want the browser to render from the local machine’s library. A font stack is defined using the CSS font-family property. You can define as many choices as you want with the first choice being the perfect font you want your website to display in, and the last being the default font-family variant, whether serif or sans-serif.

Examples (from css-tricks.com… I love these font stacks)

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

Resources

There are a lot of tutorials and snippets for building font stacks. My favorite of all time is the font stacks snippets from css-tricks.com, these are really in depth and well built font stacks that are grouped by family. If you looking for a Helvetica or Georgia based font stack, they will have it.

Here are some other resources for your viewing pleasure:

The Pros and Cons

Pros:

  • Easy to implement
  • No hosting, pull font file directly form local machine
  • Fastest load speeds

Cons:

  • Limited unique fonts
  • Font will not look exactly the same on all browsers

Use ’em all

Creating a really unique font look can enhance the design greatly. In some cases a good header font can actually complete the entire web site. When beautifying your web site you’ll probably actually want to use more than one technique.

If you want a really unique header font use @font-face or and embedded font from Kernest and then compliment the new header with a great looking paragraph font using a font stack from css-tricks.com. Whatever the case, play around with these techniques and see what works best for you and your designs.

Some Great Examples

I would feel awful if I didn’t leave you with some example, so here’s a few awesome examples of sites that use active text.

Related Articles

Previous:
Next:

Tagged with:

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

View all contributions by

Website: http://patrick-cox.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.