How to change font?

Help
16

thank you for sharing! for some reason, my old .css file to change font didn’t work.

17

A bit late to the party, but for people stumbling upon this thread:

I am using the solution provided by @Genzer

I found the serif fonts to be a bit too small as well and I scaled them up like so:

.markdown-preview-view {
  font-family: "TeX Gyre Pagella", sans-serif !important;
  font-size: calc(var(--editor-font-size) * 1.2);
}

In my case, this approx. matches the source editor font.

2 Likes
18

Great tips! But they don’t address inline code and code blocks. For a full monospace experience in the editor I ended up doing something like:

.markdown-source-view, .cm-inline-code, .HyperMD-codeblock {
    font-family: 'Azeret Mono' !important;
    font-size: var(--editor-font-size) !important;
}

It’s pretty disappointing having to go down to this level, though, and I’m expecting this to break with a future upgrade or a change of theme.

3 Likes
19

I want to change my obsidian font to “IRANSans” & I use “Farsi” for my docs but non of above solutions worked for me.
Farsi is a right to left language so does it make a difference?
When I use above solutions it changes the font but not to IRANSans, it changes to Times New Roman or Arial I think …!
Is there any way to solve this?

20

This worked for me! Just adding one other class for anyone else looking at this and wants consistency between other text elements :slight_smile:

Setting properties for the class .view-header-title will affect the text in the title above the editor pane.

Example:

.view-header-title {
 font-size: 14px;
 font-family: 'SF Mono', Menlo, Monaco, monospace;
}
3 Likes
21

This doesn’t seem to work anymore with the new editor with live preview. The font gets applied only if I check “use legacy editor” in the Editor setting.

2 Likes
22

anyone figure out what the new class is for live preview?

23

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

24

The following worked for me:

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

Thank you. This worked for me too

26

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

27

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
28

Excellent fix. Thanks!

29

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
30

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:

image
image1748×1474 67.3 KB

2 Likes
31

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
32

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

33

@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
34

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
35

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