Escape quote with font family

Question

I want to use font-family CSS

<div style="font-family:"Times New Roman", Times, serif"> Hello world! </div>

For the font-family "Times New Roman", should I escape the quotes? Or can I use it without quotes?

Answer 1

Use single quotes:

<div style="font-family: 'Times New Roman', Times, serif"> Hello world! </div>

or alternatively (Thanks @Matt):

<div style='font-family: "Times New Roman", Times, serif'> Hello world! </div>

Answer 2

Within an attribute value in HTML, you cannot use delimiter of the value inside the value as such, for rather obvious reasons: in style="font-family:"Times New Roman", Times, serif", the second quote terminates the value, so that there is just the attribute style="font-family:" followed by something that constitutes a syntax error.

There are several ways around this.

1) The delimiter can be written using an entity reference like ", e.g.

style="font-family:"Times New Roman", Times, serif"

2) You can use a different delimiter, namely a single quote, if the value contains a double quote:

style='font-family:"Times New Roman", Times, serif'

3) Depending on the nature of the attribute value, it might be possible to use another character inside the value. In this case, since the value is CSS code and CSS accepts single quotes too, you can write:

style="font-family:'Times New Roman', Times, serif"

4) Depending on the nature of the attribute value, it might be possible to omit the character inside the value. In this case, since the quoted string in the value is a font name in CSS and since the quotes are not required (contrary to popular belief) in a simple case like this, you can write:

style="font-family:Times New Roman, Times, serif"

Finally, you can avoid this problem by using an external style sheet or at least a style element instead of writing CSS code in an attribute.