bowdenweb

Always Quote Font Family Names in css

The css3 specification says that font-family names must be quoted if they contain the keyword values of inherit, default, serif, sans-serif, monospace, fantasy and/or cursive. By simply applying quotes to every font family name besides the defaults, you’re being proactive and ensuring that the proper font-family is applied.

Sounds simple enough, but why should you care? If you’re in a large organization, setting this simple standard can go along way, especially when there are lots of hands touching code. Moreover, the disconnect between type designers and the css specification is quite evident when using font linking. I noticed this trend while searching for font families with multiple weights; many fonts that should be in the same font-family under css rules are actually in their own family as defined by the artist. Below are screenshots of a few popular fonts that have the keyword value serif in their name and could cause problems if not quoted.

Note: I’m not attacking type designers here, I’m merely pointing out the obvious. Regardless of who is to blame, if you just start quoting your font-family values, you’ll never have to worry about it.