CODEWITHSUNDEEP
javascriptjquerycssgoogle-chrome
Steve
Steve

Reputation: 4898

font-family not read correctly in Chrome

I have a jsfiddle here - http://jsfiddle.net/qYR6U/8/ - where I set the font-family with jQuery and read it back with jQuery. If the font-family I set is "Arial . . ." it comes back okay, in a single set of double quotes. But if the font-family I set is "Comic . . ." it comes back in a set of double quotes enclosed inside of a set of single quotes.

This only happens with Chrome. Does anyone know what's going on?

$('#box').css('font-family', 'Arial,Helvetica,sans-serif');
var fontFamily1 = $('#box').css('font-family');
console.log(fontFamily1);

$('#box').css('font-family', 'Comic Sans MS');
var fontFamily2 = $('#box').css('font-family');
console.log(fontFamily2);
debugger;

Thanks.

Upvotes: 1

Views: 1429

Answers (2)

nvbmnbvm
nvbmnbvm

Reputation: 23

You are using single quotes for the JS function arguments. To set font-family with a font that's name has multiple words, you should enclose the name in quotes, too.

So instead of using 'Comic Sans MS' in your code, try '"Comic Sans MS"'. (Single and double quotes). I believe the Arial one works because that's just one word.

EDIT: I might've misunderstood. If the problem is that you have quotes around a string that you don't want to have quotes around, you just need to remove them by string manipulation.

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49198

It's because when a font name has spaces, the browser is interpreting any string requiring quoting as needing quotes, and hence the quotes are added (which is appropriate for the browser to do). Why only Chrome appears to do this (normal) quoting when it's property is read back, you got me.

Try Times New Roman, you get the same quoted string back.

From W3:

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 }

<BODY STYLE="font-family: '21st Century', fantasy">

Upvotes: 2

Related Questions