     @updateTool(newState)
 
   handleFontFamily: (event) ->
-    newState = {fontFamilyIndex: event.target.value}
+    newState = {
+      fontName: event.target.selectedOptions[0].innerHTML,
+    }
     @setState(newState)
     @updateTool(newState)
 

  render: ->
    lc = @props.lc

    {div, input, select, option, br, label, span} = React.DOM

    (div {className: 'lc-font-settings'},
      (select {value: @state.fontSizeIndex, onChange: @handleFontSize},

          (option {value: ix, key: ix}, "#{size}px")
        )
      )
      (select {value: @state.fontName, onChange: @handleFontFamily},
        ALL_FONTS.map ([groupName, fonts]) =>
          (optgroup {label: groupName}, fonts.map (family, ix) ->
            (option {value: family.name, key: ix}, family.name)
          )
      )
      (label {htmlFor: 'italic'},
        (input \
