   render: ->
     lc = @props.lc
 
-    {div, input, select, option, br, label, span} = React.DOM
+    {div, input, select, option, br, label, span, optgroup} = React.DOM
 
     (div {className: 'lc-font-settings'},
       (select {value: @state.fontSizeIndex, onChange: @handleFontSize},

{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.

          (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 \
