Monospace Font in the Editor

[andy47]

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.

[death.au]

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.

[andy47]

Thanks, works like a dream.

[keshavjalan]

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.

[zalary]

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.

[lara8]

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

[pabuisson]

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

Which solutions would we have?

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.

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?

[Mayonnaise2124]

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

[bdillahu]

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

[Nebucatnetzer]

@death.au

here 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.

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; }

[btgrant]

I’ve been using a solution like this to get monospaced fonts in the editor, though it doesn’t work consistently across themes.

Someone introduced me to the Style Settings plugin recently and I was able to use it to get monospaced font into the editor for one of the themes that the CSS snippet doesn’t work for.

I’m wondering if there’s some documentation that I could reference that would allow me to setup a single CSS snippet that would work across themes more consistently?

[oash]

Would mind sharing that CSS snippet? I can’t figure out how to change the editor font only. Changing the base font obviously changes everything.

[btgrant]

Apologies for the slow response, @oash . The CSS snippet is right at the end of @Nebucatnetzer 's post above mine. In your file, you’ll have to change 'your font' to whatever font you want to use. For example, in my vault, I have a .obsidian/snippets/monospaced-editor.css file with the following contents:

.markdown-source-view { font-family: 'FuraCode Nerd Font', monospace; }

[oash]

Thank you! I can’t get it to work with my current theme (red graphite) but it works with some others. Time to switch I guess!

[Sicalxy]

This snippet does not affect tables. If 'your font' is not the same as theme’s font, it might cause inconsistence of different fonts:

---

A simple snippet to set it consistently:

:root {
  --font-monospace: 'Source Han Sans HW SC', 'Source Code Pro', monospace;
}
.markdown-source-view {
  font-family: var(--font-monospace);
}