Why would font names need quotes?
You can always put a specific font family name in quotes, double or single, so Arial
, "Arial"
, and 'Arial'
are equivalent. Only the CSS-defined generic font family names like sans-serif
must be written without quotes.
Contrary to popular belief, a font name consisting of space-separated names such as Times New Roman
need not be quoted. However, the spec recommends “to quote font family names that contain white space, digits, or punctuation characters other than hyphens”
Do I need to wrap quotes around font family names in CSS?
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.
When should CSS font-family value use quotes?
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)
Do fonts with spaces need to be enclosed in quotes?
Per the spec, no it isn't required, but it is recommended.
Font family names other than generic families 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.
To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
Why is the First Selection in a Font Family Always Quoted?
This is interesting, I figure it has to do with spacing in the name.
The official spec says this:
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, it probably has nothing to do with being the first one :-)
Reference: http://www.w3.org/TR/CSS21/fonts.html#font-family-prop
Why does the font tag require extra quotes when the font name contains a hyphen?
From what I can tell, the browsers are using the face
attribute of the font
tag to populate the font-family
CSS property. So face="'Handwriting - Dakota'"
becomes font-family: 'Handwriting - Dakota'
. However, face="Handwriting - Dakota"
becomes font-family: Handwriting - Dakota
, which is invalid CSS.
According to the CSS spec:
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.
So, <font face="American Typewriter">
worked because the font name is a valid sequence of CSS identifiers. But since a bare hyphen is not a valid CSS identifier (source), the font name must be a quoted string. (Or the hyphen must be escaped; it turns out that <font face="Handwriting \- Dakota">
works, too.) Similarly, <font face="3dumb">
doesn't work because CSS identifiers can't start with a number. (3dumb is another Font Squirrel font.)
Related Topics
How to Apply CSS to Iframe Content
Blocky Gradient Effect in CSS3
Is There a 'Box-Shadow-Color' Property
Add Ellipses to Overflowing Text in Svg
How to Remove Blue "Selected" Outline on Buttons
Text Overflow Ellipsis: Avoid Word Break
How to Apply a Style to All Children of an Element
Prevent Children from Inheriting Transformation CSS3
How to Extend CSS Class with Another Style
CSS Transitions with Calc() Do Not Work in Ie10+
Parent Element Backdrop-Filter Does Not Apply for Its Child
Apple-Like Scrollbars Using CSS
Is There Such a Thing as an "All Inclusive Sibling" CSS Selector
How to Make Sure Select Option Text Align in the Center in Ie