CSS style precedence

I believe --font-text-override is the font the user sets in the settings UI, so that’s being applied instead of your snippet as it comes first. If nothing is set in the UI by the user, var(--font-text-theme) is applied. If that’s not set anywhere then var(--font-default).

pic from a copy of the default app.css


Hopefully someone can jump in for your other questions (I’ll check back later if I have more time), but quickly:

There’s the base app.css that loads, theme and plugin CSS (if any), and user snippets (if any). In most cases you need to be as or more specific than the app.css or (theme CSS) to get your custom snippet to apply.

Definitely have a look at the app.css (in the dev tools “sources” tab) – I keep a copy in a file for quick search and reference, the Obsidian CSS Inspector Workflow, and CSS variables - Developer Documentation.

1 Like