Issue to change font

[cReisz]

What I’m trying to do

I want to select a downloaded font to regular text on my vault. My theme (AnuPpuccin) has an option to change it, but I don’t want to be dependent to it, so I prefer a snippet.

Things I have tried

I’m using this css snippet:
.markdown-source-view.mod-cm6 .cm-scroller {
font-family: “Space Grotesk”, monospace;
font-weight: lighter;
}

.markdown-preview-view {
font-family: “Space Grotesk”, monospace;
font-weight: lighter;
}

It works to change the font, but I can’t change it’s weight.

[rigmarole]

@cReisz

Space Grotesk

I just quickly googled the font, and I don’t see “lighter” in the spec. Just “light” or a weight of 300. Maybe that’s the issue?

[cReisz]

It worked! I feel so dumb right now lol, I thought “lighter” selected, literally, the lighter weight of a font. Well, thank you!

[rigmarole]

No problem, I think “lighter” is included in some fonts

[cReisz]

I’ve got an unexpected issue: “font-weight” value will affect headers as well, even considering I use a different font for them. How can I “filter” the code to change just regular text?

[rigmarole]

I don’t know specifically for the body, but you’ll have to isolate that element. It might be as simple as styling the <p> element.

The CSS guide is here: CSS snippets - Obsidian Help I can’t quickly find anything specific to <p> or regular text.

This is the first potential result I found, but the CSS did change quite a bit for version 1.0. How to adjust the line height with CSS? - #6 by GLight This links is just to show that there are some structured variables you can use to point at different elements, and Reading View vs. Editing View, etc.

[ariehen]

As rigmarole suggested, we can easily add a p to .markdown-preview-view p { } to target paragraphs only, in Reading View anyway, but it shouldn’t be necessary here.

Using Anuppuccin and a slightly altered version of your CSS,

.markdown-source-view.mod-cm6 .cm-scroller {  
font-family: 'iA Writer Duo S';  
font-weight: 900;  
}

.markdown-preview-view p {  
font-family: 'iA Writer Duo S';  
font-weight: 900;  
}

I’m not seeing a font-weight change for the headings in Editing or Reading Views:

font-weight: 100 →

font-weight: 900 →

Also in your own CSS, I’d stick to numbers. These lightest, lighter, etc., seem to be defined in the Anu theme.

---

There are a bunch of Style Settings as well to play with, including ones for individual heading weights.

Just a guess, but I suspect your other heading CSS (defining the font) or some Style Settings may be conflicting in some way. You could try putting the custom heading CSS, with a font-weight property, under this CSS as that will be applied last, or poke around the Anuppuccin Style Settings.