Live Preview: Style header font attributes?

Things I have tried

I want my headers to be indistinguishable from regular text in Live Preview view.

I tried:

.cm-s-obsidian div.HyperMD-header-1, .markdown-preview-view h1 {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal; 
font-size: medium;
line-height: normal;
/* font-family: */
}

per Live Preview: Add margin-top to H1-H6? - Help - Obsidian Forum

I also tried it with !important added to the end.

I also tried:

:root {
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
font-stretch: normal !important;
font-size: medium !important;
line-height: normal !important;
}

per How to change the editor font now that Live Preview broke our old methods? - Help - Obsidian Forum

Although I create a snippet with the CSS indicated above and I activate the snippet, there’s no effect in Live Preview mode.

What I’m trying to do

I want my headers to be indistinguishable from regular text in Live Preview view. I want the various font attributes to be “normal” and the font-size to be “medium”.

Maybe the following works:

/* headlines :: SOURCE + LIVE */

dummy { 
/* without this dummy class, it doesn't work */
/* for whatever reason? - there must be a class in front */
}

.cm-header {
  color: var(--white3);
  font-weight: normal !important;
}

.cm-header-1 {
  font-size: var(--font-size-h1);
}

Thank your for looking at this! I tried your snippet and it doesn’t seem to have any effect in Edit view. It does get rid of bolding in Reading view (but doesn’t change the font size). I tried in the Help vault too.

just to cover the basis, css has specificity rule i.e. if you define .cm-s-obsidian .cm-header-1 and then down the line you put .cm-header-1. the one with that two combined selector will get priority and thus be applied.

!important is okay if u just using your own personal theme. but if combined with community theme, you may not know when the dev uses that as well, thus leading to some conflict of priority.

as such, building on Amolip’s suggestion and looking at your original post, this structure might work for you. failing which, you may insert !important for each line.

.cm-s-obsidian .cm-header-2 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal; 
    font-size: medium;
    line-height: normal;
}

but not knowing what theme you’re using (which may use higher specificity) it will tricky to provide workable suggestion. for that I suggest u open DOM/Script Inspector by Ctrl+Shift+I shortcut while Obsidian in opened. use the Select Element (Ctrl+Shift+C) to point and click to your header to see if the css is overridden by another snippet.

you can in my screenshot below, my header font-weight .cm-s-obsidian .cm-header is overriden by .cm-s-obsidian .cm-header-2 (because it is more specific). Hope this gives great clarity

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.