Codemirror: Custom Font Does Not Work

[niftylettuce]

The line height and cursor positioning, and selection is all off

All I did was add this CSS, it's not documented anywhere how to fix this...?

.CodeMirror {
  font-family: Inconsolata, monospace;
}

[niftylettuce]

We need to document this capability more apparently, I had to dig deep for it... should be in a FAQ somewhere so it easily shows up on Google when you search "codemirror custom font size"...

cm.getWrapperElement().style.fontSize '24px';
cm.refresh();

[marijnh]

What you are probably seeing is a web font being loaded after the editor has already initialized, changing the size of the content text, and thus invalidating the measurements the editor did. Calling refresh will indeed fix that, as will initializing the editor after the font has finished loading. (Changing the fontSize style, on the other hand, doesn't have anything to do with it.)

[niftylettuce]

@marijnh can you please document how to set custom font size and family properly? can't get it working still.

[marijnh]

What you did looks correct. Just make sure you schedule a refresh when (or delay editor initialization until) your web fonts have loaded.