CODEWITHSUNDEEP
javascriptcssfonts
starwed
starwed

Reputation: 2607

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

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.

Upvotes: 3

Views: 1933

Answers (2)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94299

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.

Upvotes: 5

reisio
reisio

Reputation: 3242

You’re mistaking font for font-family (fontFamily in JS-speak).

Upvotes: 1

Related Questions