When should CSS font-family value use quotes?

Question

When should the value for CSS 'font-family' have quotes around it?

I've seen both font-family: arial and font-family: "arial".

As a specific example, I declare a font this way:

@font-face {
    font-family: 'entypo';
    font-style: normal;
    font-weight: 400;
    src: url('/css/fonts/entypo.woff') format('woff');
}

What would be the correct CSS to have an element use this font-family?

So, basically your question is, *"in which CSS standard is this specified?"*. — Šime Vidas, Mar 05 '13 at 16:19
I had read an article about that explaining that even non-quoted values WITH spaces like Times new Roman would work - but I unfortunately don't have the url on hand. Know that the internals on that are quite complicated and have to do with the actual name of the font-family... — George Katsanos, Mar 05 '13 at 16:27
@GeorgeKatsanos: Uh, that seems [pretty easy to verify, even without an article.](http://jsfiddle.net/HMVHr/) — Devin Burke, Mar 05 '13 at 16:39

score 8 · Accepted Answer · edited Aug 16 '19 at 16:44

8

You only need quotes when the font itself has a space such as "Times New Roman".

Arial does not need quotes, but some people use quotes such as "Arial" to be more consistent. It is simply personal preference.

Seen in Justin's below comment: font-family: times new roman; works without quotes (JSFiddle).

You can call your new @font-face using font-family: 'entypo'; as you would normally expect. (link)

edited Aug 16 '19 at 16:44

TylerH

20,799
66
75
101

answered Mar 05 '13 at 16:18

mswieboda

1,026
2
10
30

Right, adding quotes even on a single word has the benefit of consistency across CSS. – Devin Burke Mar 05 '13 at 16:19
2

TIL Adding quotes around a name makes the name more precise. `:P` – Šime Vidas Mar 05 '13 at 16:20
1

Oh? You [need quotes around Times New Roman](http://jsfiddle.net/HMVHr/)? – Devin Burke Mar 05 '13 at 16:44
1

@JustinSatyr I stand corrected, thanks. – mswieboda Mar 05 '13 at 18:18
1

This is a common misconception: http://mathiasbynens.be/notes/unquoted-font-family – Kevin Suttle Apr 07 '15 at 19:27
FYI, where times new roman doesn't need quotes. The barcode font **code 128** does. It's probably because of the second word starting with a number. [fiddle](http://jsfiddle.net/nvao239t/1/) – Aaron Carlson Oct 01 '18 at 15:30

score 1 · Answer 2 · answered Mar 05 '13 at 16:21

Just going to answer from this:

http://www.w3.org/TR/CSS2/fonts.html#font-family-prop

To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:

body { font-family: "New Century Schoolbook", serif }

Font family names that happen to be the same as a keyword value ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive') must be quoted to prevent confusion with the keywords with the same names.

score 1 · Answer 3 · answered Mar 05 '13 at 17:06

1

By the CSS 2.1 spec, a font name needs to be in quotes if it contains characters other than identifier characters (which is a broader concept than just “Ascii letters and digits”) and spaces. So font-family: foo bar is correct, and so is e.g. font-family: entypo of course.

Coding style is a different issue. It is always correct to quote a specific font family name (as opposite to generic names like sans-serif), so font-family: "entypo" is correct, too.

Very theoretically, a font name also needs to be quoted if a specific font family name coincides with a generic name (I don’t think anyone ever created such a font) or if its name contains leading or trailing spaces or consecutive spaces (but no one in his sense would name his font that way).

answered Mar 05 '13 at 17:06

Jukka K. Korpela

195,524
37
270
390

`font-family: foo bar` is **not** correct if `foo bar` is the name of the font. It should be in quotes. As a side note, I've seen both "Serif" and "Monospace" used as font family names. – 0b10011 Mar 05 '13 at 17:34
@bfrohs, please consult the specification cited. You can also use http://jigsaw.w3.org/css-validator/ And you *can* use quoted `"Serif"` as a font name, it is syntactically valid; but it makes no sense, since there is no such font family. – Jukka K. Korpela Mar 05 '13 at 18:26
The spec cited specifically says "to quote font family names that contain white space". Ergo, your example (`font-family: foo bar`) should be `font-family: "foo bar"`. I know you *can* use `"Serif"` quoted--I was pointing out I *have* seen fonts named both `Serif` and `Monospace` before. – 0b10011 Mar 05 '13 at 18:45
@bfrohs, check the spec again: there is a requirement, and there is a recommendation; there is a difference between “shall” and “should”. And I don’t thin you have seen *fonts* named Serif and Monospace; just (incorrect) `font-family` values with such names in quotes. – Jukka K. Korpela Mar 05 '13 at 19:52
I'm actually looking at my system fonts ;) – 0b10011 Mar 05 '13 at 20:07

When should CSS font-family value use quotes?

3 Answers3

Linked

Related