Posts from “29 Mar 2014”

To test your CSS font stacks. Seriously.

So maybe you use @font-face or maybe you link to an external font like this:

<!-- Linking to Source Sans Pro hosted at Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>

And your CSS has code like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you type that font name correctly? Are you sure? Why not test it like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, "Comic Sans MS", Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you catch that? I added “Comic Sans MS” to the font stack. So if your intended font doesn’t show up, the visually distinct Comic Sans MS will alerting you to the problem.

Just remember to remove it from your production code. You wouldn’t want to be embarrassed, would you?

Or, you know, you could just type it into your website inspector of choice to double-check the font stack works. Just saying…