# Monospace Font in the Editor

**URL:** <https://forum.obsidian.md/t/monospace-font-in-the-editor/648>\
**Category:** Help\
**Created:** [May 28, 2020, 1:47am UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648 "2020-05-28T01:47:36Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![andy47](https://forum.obsidian.md/user_avatar/forum.obsidian.md/andy47/32/468_2.png) [@andy47](https://forum.obsidian.md/u/andy47)\
**Post date:** [May 28, 2020, 1:47am UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/1 "2020-05-28T01:47:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![death.au](https://forum.obsidian.md/user_avatar/forum.obsidian.md/death.au/32/796_2.png) [@death.au](https://forum.obsidian.md/u/death.au)\
**Post date:** [May 28, 2020, 7:22am UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/2 "2020-05-28T07:22:53Z")

</div>

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:

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

```

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

---

<div class="post-metadata">

**Author:** ![andy47](https://forum.obsidian.md/user_avatar/forum.obsidian.md/andy47/32/468_2.png) [@andy47](https://forum.obsidian.md/u/andy47)\
**Post date:** [May 28, 2020, 8:20am UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/3 "2020-05-28T08:20:33Z")

</div>

Thanks, works like a dream.

---

<div class="post-metadata">

**Author:** ![keshavjalan](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/aca169/32.png) [@keshavjalan](https://forum.obsidian.md/u/keshavjalan)\
**Post date:** [June 12, 2020, 8:18am UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/4 "2020-06-12T08:18:47Z")

</div>

![Screenshot 2020-06-12 at 1.43.30 PM](https://forum.obsidian.md/uploads/default/original/2X/0/09bd16ba112cd0fe9f3f2be01cb91d7153c86da1.jpeg)  
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.

---

<div class="post-metadata">

**Author:** ![zalary](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/z/76d3ee/32.png) [@zalary](https://forum.obsidian.md/u/zalary)\
**Post date:** [June 12, 2020, 5:24pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/5 "2020-06-12T17:24:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lara8](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/l/ecccb3/32.png) [@lara8](https://forum.obsidian.md/u/lara8)\
**Post date:** [August 11, 2020, 4:09pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/6 "2020-08-11T16:09:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pabuisson](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/p/b782af/32.png) [@pabuisson](https://forum.obsidian.md/u/pabuisson)\
**Post date:** [August 28, 2020, 1:20pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/7 "2020-08-28T13:20:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mayonnaise2124](https://forum.obsidian.md/user_avatar/forum.obsidian.md/mayonnaise2124/32/20949_2.png) [@Mayonnaise2124](https://forum.obsidian.md/u/Mayonnaise2124)\
**Post date:** [August 28, 2020, 7:46pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/8 "2020-08-28T19:46:09Z")

</div>

Did you give light/dark-specific settings? You should take a look at [this](https://forum.obsidian.md/t/common-selectors-for-custom-css/1984/2).

---

<div class="post-metadata">

**Author:** ![bdillahu](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/b/71e660/32.png) [@bdillahu](https://forum.obsidian.md/u/bdillahu)\
**Post date:** [August 29, 2020, 3:46pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/9 "2020-08-29T15:46:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Nebucatnetzer](https://forum.obsidian.md/user_avatar/forum.obsidian.md/nebucatnetzer/32/3918_2.png) [@Nebucatnetzer](https://forum.obsidian.md/u/Nebucatnetzer)\
**Post date:** [August 31, 2020, 8:11pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/10 "2020-08-31T20:11:38Z")

</div>

> [@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:
> 
> ```auto
> .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:

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

```

---

<div class="post-metadata">

**Author:** ![btgrant](https://forum.obsidian.md/user_avatar/forum.obsidian.md/btgrant/32/14789_2.png) [@btgrant](https://forum.obsidian.md/u/btgrant)\
**Post date:** [June 6, 2021, 4:10pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/11 "2021-06-06T16:10:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![oash](https://forum.obsidian.md/user_avatar/forum.obsidian.md/oash/32/9363_2.png) [@oash](https://forum.obsidian.md/u/oash)\
**Post date:** [June 23, 2021, 5:34pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/12 "2021-06-23T17:34:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![btgrant](https://forum.obsidian.md/user_avatar/forum.obsidian.md/btgrant/32/14789_2.png) [@btgrant](https://forum.obsidian.md/u/btgrant)\
**Post date:** [July 15, 2021, 4:01am UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/13 "2021-07-15T04:01:18Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![oash](https://forum.obsidian.md/user_avatar/forum.obsidian.md/oash/32/9363_2.png) [@oash](https://forum.obsidian.md/u/oash)\
**Post date:** [July 16, 2021, 3:58pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/14 "2021-07-16T15:58:15Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Sicalxy](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/5fc32e/32.png) [@Sicalxy](https://forum.obsidian.md/u/Sicalxy)\
**Post date:** [August 29, 2021, 6:52pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/15 "2021-08-29T18:52:17Z")

</div>

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

![before](https://forum.obsidian.md/uploads/default/original/3X/1/b/1b9ab3ee8d95e711bc934fa663037a180cb12b05.png)

* * *

A simple snippet to set it consistently:

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

```

![after](https://forum.obsidian.md/uploads/default/original/3X/1/6/163d7a923ac195b867dda820f730216718ca9e1a.png)

---

<div class="post-metadata">

**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\
**Post date:** [September 28, 2021, 6:52pm UTC](https://forum.obsidian.md/t/monospace-font-in-the-editor/648/16 "2021-09-28T18:52:26Z")

</div>

Closed on September 28, 2021, 6:52pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
