     items.push('italic') if newState.isItalic
     items.push('bold') if newState.isBold
     items.push("#{fontSize}px")
-    items.push(@getFamilies()[newState.fontFamilyIndex].value)
+    items.push(FONT_NAME_TO_VALUE[newState.fontName])
     @props.lc.tool.font = items.join(' ')
     @props.lc.trigger 'setFont', items.join(' ')
 

{defineOptionsStyle} = require './optionsStyles'
{_} = require '../core/localization'

defineOptionsStyle 'font', React.createClass
  displayName: 'FontOptions'
  getInitialState: -> {
    isItalic: false
    isBold: false
    fontFamilyIndex: 0
    fontSizeIndex: 4
  }

  getFontSizes: -> [9, 10, 12, 14, 18, 24, 36, 48, 64, 72, 96, 144, 288]

  getFamilies: ->
    lc = @props.lc

    [
      {name: _('Sans-serif'), value: '"Helvetica Neue",Helvetica,Arial,sans-serif'},
      {name: _('Serif'), value: (
        'Garamond,Baskerville,"Baskerville Old Face",'
        '"Hoefler Text","Times New Roman",serif')}
      {name: _('Typewriter'), value: (
        '"Courier New",Courier,"Lucida Sans Typewriter",'
        '"Lucida Typewriter",monospace')},
    ]

  # LC's text tool API is a little funky: it just has a 'font' string you can
  # set.

    @updateTool(newState)

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

