Obsidian ignores font size changes in theme CSS

Help
1

Hi,

I am at my wits end. It appears no one else on this forum, or the internet for that matter, is having the problem I am facing, which itself is startling - almost 99% of the time, someone else has had the same issue, right?

I have a very solid grasp of CSS, having written more than a few webpages in my day, and as such I have been having loads of fun with themes like Dracula and Cybertron, diving into their CSS files and customizing buttons and colors and stuff. All good.

For some reason, I can’t modify the font sizes via CSS. I can change the “normal” font size, which appears to have the same functionality as the baked-in font size slider in preferences, but when I try to change the size of say, header2, nothing happens. Same with the other headers. This is, if you’ll pardon me here, giving me a head-ache.

Is this simply not supported in Obsidian? Is there some fixed ratio that it uses from the normal text size to calculate the headers, and it can’t be overridden? That seems silly considering how flexible it is in other respects.

What am I doing wrong?

Edit: I should clarify, this is in Edit view. I can change the font sizes for headers in Reading view no problem.

2

I should also include an example.

This:

.cm-header-1
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: 30px;
  font-weight: bold;
  color: var(--text-title-h1);
}

looks exactly the same as this when applied:

.cm-header-1
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: 99px;
  font-weight: bold;
  color: var(--text-title-h1);
}

However when I do the same thing to .markdown-preview-view h1 it changes the font size just fine in the reading view.

3

I have no idea about this specific syntax, but are you aware that themes had a major revamp in a recent Obsidian update? So if you’re using older CSS examples, you might be using something that is no longer supported.

2 Likes
4

I was not aware of this!! I’m going to pull some more recent code and I will update the thread with my findings. Thank you!

5

Yep, it was the update - found in the release notes for 0.13.27

  • Theme developers: you can also now use variables for heading font sizes with --h1, --h2, etc. We’ve also moved heading font sizes from cm-header-x to HyperMD-header-x to avoid certain elements not being properly up-sized like LaTeX and inline code.

Did a find+replace for cm-header to HyperMD-header and we’re off to the races. Knew I had to be doing something wrong. Thanks!

1 Like
6

Also this major one, more recently. This announcement includes a migration guide for themes:

https://forum.obsidian.md/t/0-16-0-theme-migration-guide/42537

7

The recent one currently only applies to Insider builds but will come to the stable version eventually.

2 Likes
8

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