How to change font?

Possibly?

/* THIS APPEARS TO CHANGE THE SOURCE VIEW FONT IN THE NEW LIVE EDITING */

.markdown-source-view.mod-cm6 .cm-scroller {
  font-family: 'Courier Prime Code', Menlo, 'iA Writer Mono V', 'iA Writer Duo V', Monaco, 'Courier Prime Code', monospace;
}

Angel

The following worked for me:

.markdown-source-view .cm-editor .cm-scroller {
  font-family: 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace !important; 
}
2 Likes

Thank you. This worked for me too

Thank you so much for your help! Now my css snippet works with the stock theme!

Hello there!
I would like to organise with the headings but they are way too big, ant then take way to much space on a note.

So I would like to reduce the size of the headings. Maybe even change the Header one to Center rather than Align left.

Is there an easier way rather than go CSS ? ^^
Even if I get my hands dirty by getting help, is there a project to edit the font in an user friendly way in a future (or even a Plug-in) ?

Thanks!

2 Likes

Excellent fix. Thanks!

My gosh! This is so cryptic! Look how many attempts, failures, and different answers there are here. It’s crazy that I might have to schedule an hour or two of my day to troubleshoot changing fonts in a text dominant program.

Could someone who knows CSS and Obsidian post a standard template that includes every style that Obsidian uses? Where users could simply type in the font next to whatever style they want to change.

1 Like

Here’s the best way to do it.

Internally, Obsidian uses the --default-font variable for the UI font and editor font. And it uses the --font-monospace variable for code blocks in the editor.

So we just override those:

:root { --default-font: ui-sans-serif, system-ui !important; }
:root { --font-monospace: "Hack", ui-monospace, monospace !important; }

This should never break unless Obsidian does some major refactoring to the way their CSS is set up.

Note:

  • system-ui will use your system’s default font. ui-sans-serif is a newer version, currently only supported by Safari which will pick the system default sans font (there’s also ui-serif if you prefer that).
  • There’s no way to get the system default monospace font… monospace picks some random monospaced font for me, not what I have my system configured to. ui-monospace should work in the future, but again it’s currently only supported on Safari. So I explicitly specify there that I want to use the Hack font.

I’m using Comic Sans as my system font, here’s what it looks like:

2 Likes

I really appreciate this @JGXTXW !!!

And also, our font woes may finally be managed in the Obsidian Settings UI

Shiny New Things in v0.14.4

  • You can now assign multiple fonts to each font option, and the first available font will be used.
1 Like

Hello everyone <3
I am trying to change the font on my obsidian too but the issue I am having is that I am using a font that I bought from someone on their website. I have the font installed on my computer. Would any of this css work for me? or is it impossible for me to change the font to the one I Purchased?

Thank You for your help and for reading this. Much Love <3 Flip

@Flipah This thread is from before a new and easier method was implemented. In the Settings (click gear icon :gear: on bottom left of the ui), you can go to the Appearance section, and ever since version 0.14.4 you can just choose any installed font for different purposes within Obsidian (Editing View, Reading View, and the ui). In the release notes, it explains:

You can now assign multiple fonts to each font option, and the first available font will be used.


Good luck!

3 Likes

Aww!!! This did the trick <3 Thank you so so much for your reply and I hope you are having a wonderful night! Best Wishes and much love, Flip.

1 Like

Is there a way to to use a different font than what’s offered in the dropdown in the GUI settings? Especially for foreign languages, it would be nice to be able to choose a custom font beyond what is offered in the dropdown.

2 Likes

Any font you install on your system will be available in the dropdown. The options are not from Obsidian.

1 Like

@Feralflora Thanks for your response.

In my system it doesn’t seem to find system fonts though. For example, when I type in the first letter “K” it only shows four fonts.

However, for example in MS Word, I have tons of fonts starting with “K” (in my case, looking for fonts for the Khmer language), none of which show up in the Obsidian view.

Is there a way I can access those? Thanks again

1 Like

Huh, it seems that I was to quick with my previous comment. I have the same situation that not all system fonts are available in the dropdown menu in Obsidian’s settings. My comment was based on the experience that when I installed a new system font, it became available in the dropdown. Nevertheless, I now see that many system fonts are not available to choose.

I don’t know what controls which system fonts are available and which are not. You could use the workaround that solved the original poster’s issue at the top of this thread.

2 Likes

Same here. Certain fonts are unavailable in the dropdown menu in Obsidian’s settings. Menlo and Consolas (work) Karla and Open Sans (don’t).

Restarting obsidian and windows didn’t change the behavior above. I’m using the latest version of Obsidian (always).

I’ve noticed when adding a new system font, I need to restart obsidian for them to show in obsidian.

1 Like

Mine still wasn’t showing, but I noticed in this post that some fonts you need to just type it in and hope it works (rather than relying on their autocompletion).

Trying that worked for me, at least for the Khmer font:

As I was typing, it doesn’t recognize the font and give the little red circle guy:

But when I finish typing the full name out, it seems to recognize it:

In the end, what’s important is that it works :slight_smile:

Before:
image

Result:
image

2 Likes

Hello all,

I have read all this thread, and not found pointers to the ONLY thing I would need to change, that is the font SIZE in the graph view. Everything else in the default Obsidian interface and theme is OK for me (font type, colors, etc…) but I badly need to see the node names in the graph view, without zooming so much that I only see 3/4 nodes in the whole screen.

How can I create a CSS snippet that does just that? What should I write. or where is the documentation about THIS specific setting? Thanks

1 Like