Font is thinner in editor mode than in preview mode. How do I change that?

Yes, it’s possible

.cm-s-obsidian {
    -webkit-font-smoothing: auto;
}

.cm-s-obsidian .cm-header {
    -webkit-font-smoothing: antialiased;
}
3 Likes

@Piotr: as usual, thank you !!

@Piotr: there is still a difference. 1st, there is the fatter headers in Edit mode:

Then there is the “fattening” disabled, as per your last code snippet:

And this is what the same header looks like in Preview:

I checked the colours in Edit and Preview, they have the same rgb values. But the headers in Preview are thinner.

Can that be fixed?

Looking at your css file, you have different font-weight for headers in edit and preview mode.
Change this

.cm-header-1,
 .markdown-preview-view h1 {
     font-weight: 450;
     color: rgb(123, 108, 214);
     /* was(115, 98, 205); */
 }

into this

.cm-s-obsidian .cm-header-1,
 .markdown-preview-view h1 {
     font-weight: 450;
     color: rgb(123, 108, 214);
     /* was(115, 98, 205); */
 }

and do the same for all lower headers too (simply add .cm-s-obsidian for each). Currently this header style is overwritten in edit mode by original Obsidian css with font-weight: 600.

And after that remove

.cm-s-obsidian .cm-header {
    -webkit-font-smoothing: antialiased;
}

@Piotr: yes, that works. Thanks a lot !

Zero experience working with font smoothing here.

Is it OS dependent?
Best for dark background?

@Kiroro: I am on macOS and using a light theme.

1 Like

I have access only to mac, but there are multiple options that gives me the same effect, you can try with -webkit-font-smoothing: initial; or -webkit-font-smoothing: unset; or -webkit-font-smoothing: subpixel-antialiased;

Another reason might with this being overwritten by other styles if your using some custom theme, so try also with -webkit-font-smoothing: auto !important;

1 Like

None of the options worked on win10. So in certain extent confirmed the above but I am glad that it is beneficial for mac users.

Is this working on win10 -webkit-text-stroke: 0.3px; ?

Noticeably thicker, with !important. :+1:

Side track:
I was wondering if there is a way to thin down fonts (yes, going opposite), for a cleaner look. I repeated the above by lowering the px but had no luck.

depends on which built-in weights your font has, you can try smaller values: font-weight: 500;
and 400, 300, 200, 100

1 Like

Dears!

Without any doubt, I am lost in this css thingy :slight_smile:

What I would like to achieve is (using the light version of red graphite theme is: I want to increase the size of normal font from 16px to 18px. So that it is in this size in every single vault I have for every note, in edit or previe mode. This is just, because I am old and need bigger fonts to be able to read my own shit.

So guys pleas help me to understand in which css file I have to do the magic and where to store it. Currently, I am having a css file in every vault - is this the place to change values? Or is it somewhere else? In the root directory there is no css file, only in the vaults.

Thanks for your support guys!
Peter

@nathschlaegeryou cannot have 1 css file for all your vaults, you nedd 1 for each vault. So, you’ll have to adjust the font in each css file.

Hi!

Thanks for your response. I did that. My folder structure is like \Obsidian\vault1. I have sic vaults (working on re-arranging that and copied the obsidian.css into every vault and changed the font-size from 16px to 18px. Obsidian does not care about that.

I strongly assume this has something to do with settings which I might have not fully understood by now :slight_smile:
Thanks,
Peter

@nathschlaeger: in Settings, tab Appearance, have you enabled Custom CSS?

Hey Klaas!

yes I have.

Thanks
Peter

@nathschlaeger: did that change anything?

Sorry for my short answer before. No, it did not change anything.
Probably the issue is being caused by having Obsidian on my Win10 desktop as well as on my MacBook Air? And the setting on one device are overwritting the settings on the other one?

Cheers,
Peter

Hi!

I have started to re-arrange all my notes and vaults to have all notes in directories in one vault with only one file folder for the attachments. When I am done with that, I will come back to the question how to manipulate the css file, that I can increase the font size for my vault for edit and preview!

Thanks!
Peter