Interview Questions

What is wrong with font-family: "Verdana, Arial, Helvetica"?

CSS Interview Questions and Questions


(Continued from previous question...)

92. What is wrong with font-family: "Verdana, Arial, Helvetica"?

The quotes. This is actually a list with a single item containing the well-known 'Verdana, Arial, Helvetica' font family. It is probably intended to be a list of three items.

Unlike in most other CSS1 properties, values for the font-family are separated by a comma to indicate that they are alternatives. Font names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

So to ask for two fonts foo and bar the syntax is:

font-family: foo, bar

To ask for the two fonts Revival 555 and Iodine you can do this:

font-family: "Revival 555", Iodine

You could also do this:

font-family: Revival 555, Iodine

which is equivalent. Notice that this is not three fonts; you can tell because after the "l" you didn't hit a comma, (more list items to come) a semicolon (end of that property, another property coming up) or a curly brace (end of that rule). This is also equivalent:

font-family: Revival 555, Iodine

^^^^^^ whole bunch of spaces converts to one space

But this next one is asking for a different font with two spaces in the name

font-family: "Revival 555", Iodine
^^two spaces, which are not converted

In general it is more tolerant of user typing to leave out the quotes. Sometimes you need them, for example there is a real font sold by Fontworks and designed in 1995 by Stephan Müller called Friday, Saturday, Sunday. Yes, two commas in the actual font name. CSS1 can handle this:

font-family: "Friday, Saturday, Sunday", cursive

Because it can handle this, the example in the title is syntactically correct. But what the author or tool wrote was almost certainly not what the document author intended.

(Continued on next question...)

Other Interview Questions