28

I am using ACE editor on my page,

<script src="ace-builds-master/src-noconflict/ace.js" type="text/javascript" charset="utf-8">
</script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/cobalt");
    editor.getSession().setMode("ace/mode/geco");
</script>

By default it is showing a font, I want to change my font to 'Tahoma 10pt'.

How do I do that?

Jeff Puckett
  • 37,464
  • 17
  • 118
  • 167

2 Answers2

48

To change font you can either add a css rule for #editor. or use 

editor.setOptions({
  fontFamily: "tahoma",
  fontSize: "10pt"
});

But Ace only supports monospace fonts for now, and tahoma isn't monospace, so cursor position will be wrong.

a user
  • 23,300
  • 6
  • 58
  • 90
  • 1
    `setOption()` and `setOptions()` isn't working for me. Only way seems to be changing the actual CSS font-style which can throw off the positioning and sizing of the editor. – Rick Strahl Jul 07 '15 at 03:15
  • maybe you are using old version, it works on ace.c9.io – a user Jul 07 '15 at 06:08
  • Nope doesn't work for me with ace-editor. When I call setOption("fontFamily") the spacing changes to the new font spacing but the actual font doesn't. Oddly fontSize works. – Rick Strahl Jul 10 '15 at 03:41
  • 1
    Probably you have a css rule which overrides font-style on elements inside ace. – a user Jul 11 '15 at 04:28
18

To my knowledge there is no shortcut to directly change Ace's font family other than editor.setOptions().

However you can set the font size in pixels directly by calling:

editor.setFontSize(10) // will set font-size: 10px
Jivan
  • 21,522
  • 15
  • 80
  • 131