Monospace Font in the Editor

I’m probably missing a configuration option or setting somewhere but how do I get the editor to use a monospace font rather than the default variable width font?

I can see in some of the Community Theme previews that there are different fonts used in the editor window and the preview window but can’t see how to set this up myself.

4 Likes

There isn’t a configuration option for this but it’s possible to do with a custom theme.
Create (or modify) the obsidian.css in the root of your vault and add the code:

.markdown-source-view { font-family: 'your font`, monospace; }

Then make sure you have the custom theme plugin turned on.

5 Likes

Thanks, works like a dream.

2 Likes


The editor panel text color automatically changes black whenever I am trying to use a font of my own preference when toggling in the dark mode.
It’s a pain. Please help.
The reader pain works absolutely fine.

You may want to check the formatting of the css - the example code above has a backtick instead of a closing single quote which might cause issues.

If you can show your CSS, it might be easier to troubleshoot.

Thank you so so much for sharing this! This worked wonders for me.

Well, I second this. Indeed, modifying the obsidian.css does the trick, but you have to do this everytime you select a new theme, since obsidian.css get overwritten. So if you switch themes often, or want to try new ones, then every single time you need to re-append the CSS lines to obsidian.css, and it is painful (especially if you rely on more than one single vault and want to set a new theme for each of your vaults, for instance).

I personnally can’t edit markdown in a non-monospaced font, so I need to do this for every single theme I use :slight_smile:

Which solutions would we have?

:arrow_right: One would be to have a separate user-only CSS file (say user.css or custom.css) that would not be overwritten when you change theme (only obsidian.css would be). I believe at least one well-known code editor does this, might be VS Code or Atom, not sure. This would not break the way the theme plugin currently works, and still allow users to customize their CSS without having all their changes overwritten each time they switch theme.

:arrow_right: Another one would be to have a dedicated setting for this, but I think it would imply more development work, and I believe that depending on the way the themes are written, this might be more difficult to handle (maybe user would love to use a specific font, but still keep monospace fonts for code blocks for instance, I don’t know… so this seems more complicated).

What do you think?

1 Like

Did you give light/dark-specific settings? You should take a look at this.

I agree having a user.css/custom.css would be great…

1 Like

Just to help some other users there is a typo in that code snippet.
There shouldn’t be a back tick in it, this is correct:

.markdown-source-view { font-family: 'your font', monospace; }
8 Likes