How to change inline code and code blocks font

What I’m trying to do

How to change the inline code font and code block font

Things I have tried

I tried a css snippets:

/*****************************/
/* Code-blocks: Font & style */
/*****************************/

.theme-dark {
  --background-primary-alt: #40444d;
}

/* Edit mode */
.cm-s-obsidian pre.HyperMD-codeblock {     
  font-family: Consolas;
  font-size: 13px;
  font-weight: 350;
}

/* Preview mode */
.markdown-preview-view code {
  font-family: Consolas;  
  font-size: 13px;
  font-weight: 375;
}

but nothing changed

I don’t have Consolas installed on this device, but give this a try:

/* Edit mode */
.cm-s-obsidian span.cm-inline-code, 
.cm-s-obsidian .HyperMD-codeblock {     
  font-family: 'Monolisa';
  font-size: 13px;
  font-weight: 350;
}

/* Reading view */
.markdown-preview-view code {
  font-family: 'Monolisa';  
  font-size: 13px;
  font-weight: 375;
}

Live Preview | Reading view


For the monospace font-family itself in most places, you can change it in settings:

but you will need a snippet for the size and weight.

1 Like

It really works for me, thank you so much!!!

I got another question, that is I download a font to my PC(Win 11), and I can select it in the appearance–text font option. But it don’t work when I select the downloaded font, but those pre installed can be correctly selected and show

Glad the snippet worked out!


As far as the menu in Settings, as long at the font is installed on your device and you’ve restarted Obsidian, it should be available.

You may have to type the exact font name in manually instead of choosing if from the list. For example, for me, scrolling the list shows this. For anything past Gu... I need to type the font name in manually and hit Add. If the font is installed and the name correct, it works fine.

I have installed the Misans VF font in my computer, when I type in Mi, the ramaining characters emerge in the menu, just like other fonts that are preinstalled.


And it is the correct name in my font folder

so I feel confused why
OR is there any where to use the fonts by the absolute file path, by snippets or something else

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