CSS inconsistencies between laptop and desktop

My vault is synced via iCloud on iMac and MacBook Pro. It uses the same theme, all Appearance settings are identical, no CSS snippets added.

The dev console on both machines show the exact same styles applied:

On the iMac I get the expected output on a code span:

Screenshot 2023-08-07 at 10.38.46

But on the MacBook it looks like this:

Screenshot 2023-08-07 at 10.39.00

All other theme attributes are rendered properly on both machines.

What could be causing this?


The fonts are different, so maybe there’s an extra monospace font installed on one machine or the other? I’d check to see what --font-mono is picking up/referring to for both macs.

1 Like

Hovering over --font-mono on iMac:

On MacBook Pro:

Screenshot 2023-08-07 at 14.17.35

Same thing!

Huh. That’s odd. Did you install “Consolas” on both macs manually? Neither of my macs have it. Also, what theme are you using?

In any event, the font is different in your screenshots, so you could try the below snippet to force a font family for inline code only. I put SFMono-Regular here, but you could of course replace it with another as long as it’s installed on both machines. (tested with the default and Minimal themes)

.markdown-source-view.mod-cm6 .cm-inline-code, 
.markdown-rendered :not(pre) > code {
  font-family: 'SFMono-Regular'; 
1 Like

I think that’s just showing you what fonts are assigned, not which ones are actually used. If Consolas is missing on one of your Macs, it’ll use the default monospace instead per that rule. (There’s probably a way to see which font is actually in use but I don’t know how.)

I feel like an idiot. I got so used to Obsidian syncing every little detail of my config that I forgot to check font availability. Consolas was indeed installed on one machine only. Thanks a lot to everyone.

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