How do I install a font and use it on my editor?

editor

#1

I am trying to install this font: https://github.com/madmalik/mononoki

It’s not really working out for me. I’ve installed it in /usr/share/fonts/truetype/ and I’m trying to add it via preferences. I’ve also added it to my stylesheet with
@import url("https://github.com/madmalik/mononoki/raw/master/export/webfont/mononoki-Regular.ttf");

I’ve tried adding it to the front of font family like so:
"mononoki-Regular", Ubuntu Mono, Menlo, Consolas, monospace
with all sorts of different names too.

I don’t know how to add this, thanks.


#2

did you install it in /usr/share/fonts/truetype/ of your desktop or the vm? It needs to be on your local computer.
Also try using mononoki instead of “mononoki-Regular”


#3

You should use

@font-face {
    font-family: 'mononoki';
    src: url('https://madmalik.github.io/mononoki/fonts/mononoki-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('https://madmalik.github.io/mononoki/fonts/mononoki-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('https://madmalik.github.io/mononoki/fonts/mononoki-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('https://madmalik.github.io/mononoki/fonts/mononoki-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

.ace_editor{
    font-family: mononoki!important;
}

Using it directly from raw github.com is not possible due to CORS policy, 'https://ide.c9.io is therefore not allowed access.'
You can copy/paste directly this snippet into your stylesheet and the IDE will use your font directly when you save styles.css

@harutyun Web fonts win ! :wink:


Need custom fonts
Cursor is not on the right position
#4

Note that setting font on .ace_content breaks the cursor positioning, whole editor needs to use the same font


#5

Effectively, it breaks the cursor positioning.
On which class or element do I specify a new font-family for the whole IDE ? .ace_… ? body ?


#6

sorry, i have changed selector to .ace_editor in your answer, and forgot to mention that in my reply.


#7

OK. Thanks for the edit :thumbsup:


#8

AWESOME! Thanks man, I really appreciate it.