Trying to set font size per note

[mkey82]

What I’m trying to do

I would like to set the font size on note level.

Things I have tried

1. I have created the following file “.obsidian/snippets/font-size-8pt.css” with contents

.font-size-8pt {
	body {
		--font-text-size: 8pt !important;
	}
}

2. I have created a new note and placed “font-size-8pt” in the “cssclasses” property. The note contents:

---
cssclasses:
  - font-size-8pt
---
This text should be rather small

Here is what it looks like:

The body does not appear to be care about my attempts to modify it’s style.

I have employed similar methods for changing table and image styles. They worked well with those. Now I have tried a few things with font size and none of it sticks.

My platform is Linux (up to date LMDE). Obsidian version is 1.12.4. I have switched back to the default dark theme for testing purposes.

Thanks for your time.

[mkey82]

“to be care” should obviously read “to care”. I don’t see an edit button.

[ariehen]

@mkey82

.font-size-8pt {
	body {
		--font-text-size: 8pt !important;
	}
}

body comes before any cssclasses, so this nesting won’t work.

.font-size-8pt {
  --font-text-size: 8pt;
}

Use the above (body isn’t necessary here). That’s going to downsize everything including the Properties section if you’re fine with that.

If you need to include body for whatever reason:

body .font-size-8pt {
  --font-text-size: 8pt;
}

[mkey82]

OK, I understand the issue. It’s working now. Thanks. I don’t really need the body so I’m good to go.

[ariehen]

The topic doesn’t cover everything, of course, but have a look here:

Using cssclasses in snippets

After using Obsidian for a long time, I still think the ability to apply a cssclass (or multiple cssclasses) to individual notes is one of the smartest features of using CSS in Obsidian. My vaults are fairly basic UI wise, but I make liberal use of cssclasses for meaning and having fun in different notes. This topic, of course, won’t cover every scenario, but it should serve as a good introduction to writing and using cssclasses in your notes. Adding a cssclass or cssclasses to a no…

[mkey82]

@ariehen

opic doesn’t cover everything, of cours

Thanks that’s useful. Another bit of strangeness I see now is that the new font size does not appear to apply to tables and table text contents. I’ll just have to live with it, I guess.

[mkey82]

Actually, it appeals to table headers only By default, I’m hiding the table headers so I didn’t spot it immediately.

This to me says that it should apply, no?

[ariehen]

@mkey82

the new font size does not appear to apply to tables and table text contents

On mobile now so can’t property check, but those sizes are probably covered by a different variable/custom property.

Table - Developer Documentation

※ also, it looks like you are using a community theme. it may have settings as well.

[mkey82]

I am using the LTS theme, but as stated, I would like to have this set per document. Properties/cssclassess are perfect for this purpose.

but those sizes are probably covered by a different variable/custom property.

Indeed. This works fine.

.font-size-8pt {
	--font-text-size: 8pt !important;
	--table-text-size: 8pt !important;
}

Even though there’s this

--table-text-size: var(--font-text-size);

but I assume this initialization comes before my custom css so “–table-text-size” is left at 16px.