Question

I have a simple jQuery function:

$('#selectable1 span').live('mousedown', function() {
        var ff = $(this).css("font-family");
        $("#family").val(ff);
});

When a span element is clicked (mousedown) an input (#family) gets its font family value.
It works in FireFox but in Chrome it works only for font families composed from only one word. Georgia will work but Times New Roman will not.

You can see the code here:

http://jsfiddle.net/aLaGa/

or live at http://www.typefolly.com

What is wrong with this?
Thanx

Answer 1

You can change your script slightly to replace the quotes that WebKit adds when the font name contains spaces, like this:

$('#selectable1 span').live('mousedown', function() {
  var ff = $(this).css("font-family").replace(/\'/g,"");
  $("#family").val(ff);
});    ​

You can see a working demo here 🙂

And here’s a RegEx approach pulling the literal value out of style that’s probably easier than anything, but I’m not a RegEx guru, someone feel free to improve this and update the answer (I suck at RegEx, sorry!) This works for all examples you have.