Setting font-family via style.font doesn't work unless font size is also set

css, fonts, javascript

Solution

Because according to the definition from W3C, `font-size` must be there if you include `font-family`.

[
    [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]?
    <'font-size'>
    [ / <'line-height'> ]?
    <'font-family'>
]             | 
caption       |
icon          |
menu          |
message-box   |
small-caption |
status-bar

Edit: Updated to CSS3 definition.

Problem

I want to set the font of a bit of text through some JavaScript. For some reason, it seems that I can only do so when setting the `font-size` as well. So this works: ``` el.style.font = "10px arial, serif" ``` but this doesn't ``` el.style.font = "arial, serif" ``` (jsfiddle example) I know there are other ways to set the font, but for other reasons this approach would be convenient -- why isn't it working? I've checked both Firefox and Chrome, so I assume it's something I don't understand as opposed to a bug.

Original source