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 […]

By in Articles on

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

Patrick Cox

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

Trigonometry in CSS and JavaScript: Introduction to Trigonometry

Some On-Scroll Text Highlight Animations

Stack to Content Layout Transition

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 16

Comments are closed.

  3. Hi Patrick,

    I like what you’ve written here and as far my experience goes with @fontface and the Google Font Library you’re quite on the spot (also with your mentioned con’s).

    There are only 2 big Pro’s I think you could add to these techniques:
    – @fontface and Google fonts are no type-replacements based on Javascript or Flash (like Typekit, Sifr and Cúfon), meaning all your texts still are easy indexed by the search engines.
    – @font-face and Google can be used for body-text too without causing extra loading time to do so.

    Thanks for sharing this with us, Cheers & Ciao ..

  4. Gonzo-

    Good additions. I didn’t even think that Typekit, Sifr, Cufon, etc were unable to be indexed by Google, but that totally makes sense. Just another valid point about CSS and its power to be able to style elements without taking anything away from them.

    I wasn’t a big fan of Google Fonts when they first came out, but the more I use them the more I fall in love with them. In conjunction with a good font stack, I think they are the most powerful font tools available right now.

    Thanks for the comment — and the tweet.

  6. Patrick,

    thanks for your reply, appreciate that!

    I really think we have to give Google some more time, because it seems that every week there are more (and sometimes very professional designed) fonts added to the Google Library font.

    And Yep, CSS and font-stacks rule, mate! Cheers & Ciao ..

  7. Why would Cufon be not indexed by search engines? It’s a javascript form of text replacement, so the text is still there and viewable by a search bot…you don’t load the page and suddenly your text is missing, just display:none’d. I didn’t think search bots used javascript anyway?

  8. David-

    I think the argument is more about the display: none property more than anything. Bots can’t index javascript and the content within the javascript, so it comes more down to intent rather than the content itself. If you are using display: none and javascript with intent to replace meaningful keywords with other content not applicable (ie, cloaking your message), than the bots will likely penalize you.

    I don’t think in general that replacing text with the same text of different font will hurt your ranking because you aren’t doing anything deceitful. But I would still rather stay away from using text replacement methods on important keywords, especially when there are valid and legit alternatives like @font-face that don’t put your site at risk at all.

    Thanks!

  10. Cufon is as searchable with bot´s as regulat text, there is NO difference! It hides the text using javascript only, since no search engine bot loads any javascript (why would they) cufon is perfectly safe to use!

  14. I have made 1 hack if font does not render properly. Most of the time fonts in Chrome are not rendered well. Somehow it look bit broken. Hence i use text-shadow Property.
    For Eg: font-family : (your font)
    color : #000 (black)
    text-shadow : 0 0 1px #000

    This will not actually add the shadow in x and y axis of font but it will make font look better than before.

    I just tried it. I’m not sure whether this is healthy practice or not.

  16. I do prefer the @font-face method in general, and I think the Google font API is swell, but i have become quite the avid user of Cufón.

    I would like to try typeface.js, that looks promising as well.