How do I change the Font Style in ACE editor?

javascript ace-editor
user1733583 picture user1733583 · Feb 20, 2014 · Viewed 21.1k times · Source

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?

Answer

a user picture a user · Feb 20, 2014

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.

Related questions

How do I make a textarea an ACE editor?

I'd like to be able to convert specific textareas on a page to be ACE editors. Does anyone have any pointers please? EDIT: I have the the editor.html file working with one textarea, but as soon as I add …

Read More
How do I get value from ACE editor?

I am using ACE editor for the first time. I have the below questions related to it. How do I find the instance of ACE editor on the page? I don't want to maintain a global variable which will hold …

Read More
Automatically adjust height to contents in Ace Cloud 9 editor

I'm trying to add the Ace editor to a page, but I don't know how to get the height to be set automatically based on the length of its contents. Ideally it would work so when the content changes the …

Read More