Do I need to wrap quotes around font family names in CSS?

by

The CSS 2.1 spec tells us that:

Font family names must either be given quoted as strings, or unquoted
as a sequence of one or more identifiers. This means most punctuation
characters and digits at the start of each token must be escaped in
unquoted font family names.

It goes on to say:

If a sequence of identifiers is given as a font family name, the
computed value is the name converted to a string by joining all the
identifiers in the sequence by single spaces.

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

So yes, there is a difference, but one that’s unlikely to cause any problems. Personally, I have always quoted font names when they contain spaces. In a few (presumably very rare) cases, the quotes are absolutely required:

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. The keywords ‘initial’ and ‘default’ are reserved for
future use and must also be quoted when used as font names.

Also note that punctuation such as / or ! within an identifier may also need to be quoted or escaped.

More Related Contents:

  1. CSS not applying on multiple instances of a custom control
  2. What is the difference between visibility:hidden and display:none?
  3. What does the “+” (plus sign) CSS selector mean?
  4. What is the difference between Normalize.css and Reset CSS?
  5. CSS \9 in width property
  6. Opacity CSS not working in IE8
  7. CSS hover border makes inline elements adjust slightly
  8. What is the meaning of “cascading’ in CSS?
  9. Difference between @import and link in CSS
  10. Angular-cli from css to scss
  11. Position a CSS background image x pixels from the right?
  12. Style certain characters with CSS
  13. What is the difference between :focus and :active?
  14. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  15. Opacity of div’s background without affecting contained element in IE 8?
  16. Webkit CSS to control the box around the color in an input[type=color]?
  17. z-index does not work in Internet Explorer with pdf in iframe
  18. In which direction do selector engines read, exactly?
  19. HTML not loading CSS file
  20. Add ellipses to overflowing text in SVG?
  21. CSS3 combining selectors with OR instead of AND
  22. What is the difference between `margin` and `padding` in CSS?
  23. Can I apply a CSS transition to the overflow property?
  24. How to change the scrollbar color using css [duplicate]
  25. Align form elements in CSS
  26. Why doesn’t height: 0 hide my padded , even with box-sizing: border-box?
  27. CSS transition between left -> right and top -> bottom positions
  28. does a background-attachment of fixed work in iOS5?
  29. URLs within CSS files broken with Grails resources plugin 1.2.7
  30. How to override stylesheets of PrimeFaces? [duplicate]

Leave a Comment