changing font characteristics on the fly

What I'm trying to do:
Given a <textarea> with a style attribute, for example,

<textarea rows="2" style="width:96.5%; height:36px" name="txtfld" id="txtfld">{$dataArr['txtfld']}</textarea>

I want to be able to change style properties on the fly when another field changes value, for example,

<input type="text" value="black" onchange="document.getElementById('txtfld').style.color='red' />

This works for color as shown above. But for some reason this does not:
<input type="text" value="black" onchange="document.getElementById('txtfld').style.font-size='24pt' />

Can anyone spot what I'm doing wrong? Why would it work for color but not for font-size or font-family?

Thanks,
Andynic