Hi everyone! I have a quick CSS question. Apologies I know very little about typography and CSS so hope you guys can help me out. I recently updated my minimal theme settings plugin to v 5.3.2 because I also updated Obsidian to v 15.6 but this brought with it a change in fonts for edit mode which I want to change back.
Previously my edit mode/live preview mode fonts looked like this:
Now they look like this:
So, to my eyes, the new changes make the font body font “thinner”, as well as the headings at h1 to h3 level. How my fonts look now (the second picture) was basically how the minimal theme used to look in read mode before the updates. I just never turned on read mode because I liked the thicker fonts better.
I used to control the font by: (1) naming the font for edit mode in minimal theme settings as “Arial” and (2) using the following CSS snippet to preserve the h1 to h3 headings even when minimal gets updated. My understanding of the CSS (can’t remember where I assembled it from) is that it will make the default font the font for h1 to h3 headings but bolder and thicker. But now even though my font is named as Arial and my snippet is activated, the my current Obsidian view looks like the second picture instead of the first picture.
Anyone have any advice on how to tweak this?
CSS Snippet in Question
/* Headings and fonts */
h1,h2,h3,h4,h5,strong {font-weight:var(--bold-weight);}
h1,h2,h3,h4 {letter-spacing:-0.02em;}
body, input, button {
font-family:var(--font-ui);
}
.popover,
.vertical-tab-content-container,
.workspace-leaf-content[data-type=markdown] {
font-family:var(--text)
}
body, input, button,
.cm-s-obsidian .cm-formatting-hashtag,
.cm-s-obsidian {
font-size:var(--font-normal);
font-weight:var(--normal-weight);
line-height:var(--line-height);
-webkit-font-smoothing:subpixel-antialiased;
}
.markdown-source-view,
.cm-s-obsidian .cm-formatting-hashtag,
.cm-s-obsidian {
line-height:var(--line-height);
font-family:var(--text-editor);
}
.cm-s-obsidian .cm-header,
.cm-s-obsidian .cm-strong {
font-weight:var(--bold-weight);
}
.cm-formatting-header,
.cm-s-obsidian .cm-formatting-header.cm-header-4,
.cm-s-obsidian .cm-formatting-header.cm-header-5,
.cm-s-obsidian .cm-formatting-header.cm-header-6 {
color:var(--text-faint);
font-weight:var(--bold-weight);
}
.view-header-title,
.file-embed-title,
.markdown-embed-title {
letter-spacing:-0.02em;
text-align:left;
font-size:1.125em;
font-weight:var(--bold-weight);
}
.empty-state-title,
.markdown-preview-view h1,
.HyperMD-header-1,
.cm-header-1 {
letter-spacing:-0.02em;
font-size:28px !important;
font-weight:var(--bold-weight) !important;
}
.markdown-preview-view h2,
.HyperMD-header-2,
.cm-header-2 {
letter-spacing:-0.02em;
font-size:22px !important;
font-weight:var(--bold-weight) !important;
}
.markdown-preview-view h3,
.HyperMD-header-3,
.cm-header-3 {
letter-spacing:-0em;
font-weight:var(--bold-weight) !important;
font-size:18px !important;
}
.markdown-preview-view h4,
.HyperMD-header-4,
.cm-header-4 {
font-variant: normal !important;
color:var(--text-normal) !important;
font-weight:var(--bold-weight) !important;
font-size:18px !important;
}
.markdown-preview-view h5,
.HyperMD-header-5,
.cm-header-5 {
font-variant:small-caps;
text-transform:lowercase;
letter-spacing:0.05em;
color:var(--text-normal);
font-weight:300 !important;
font-size:16px !important;
}
.markdown-preview-view h6,
.HyperMD-header-6,
.cm-header-6 {
font-variant:small-caps;
text-transform:lowercase;
letter-spacing:0.1em;
color:var(--text-muted);
font-weight:400 !important;
font-size:14px !important;
}