I’m starting to move my Photoshop notes and documentation from OmniOutliner to Obsidian. I’ve optimized the OmniOutliner typography for organizational clarity and legibility, and I’d like to carry that over to an Obsidian theme.
I know a little CSS, but have really hit a wall with Obsidian’s Chrome DevTools, which is apparently almost required to modify themes. Right now, I just want to set one font-family for H1-H3 headings, and another for all body text items (lists, plain paragraphs, links in text, tags, etc.)
I found a place that changes the font family for everything, but not a way to have different font-families for headings and body text. Have you succeeded with anything like this?
There’s a Google group for DevTools, but there’s little activity.
Thanks,
Russell
So I think, what you want is the following:
Create a directory .obsidian/snippets in your vault. Create a custom.css file in that directory with the following contents:
.cm-s-obsidian {
font-family: "<font for everything else>";
}
.cm-header-1,.cm-header-2,.cm-header-3 {
font-family: "<font for headers>";
}
Hope that helps!
(Also, don’t forget to toggle it on in Preferences > Appearance > CSS Snippets)
1 Like
There is a very active CSS group in Obsidian’s Discord server as well as Obsidian’s Discourse community. See Obsidian Communities.
’
Thanks! So this snippets extension just overrides the theme css file for only those particular elements in the snippet? How does it know what attributes the snippets are overriding?
I assume this happens when Obsidian starts up? Or when that particular vault is opened?
If true, this is brilliant. I built pages for a college back in the 90s, using a Mac app called “PageMill,” and had my own staff or colleagues in IT building pages by the time CSS really took on. I just know enough to tweak a few things in Squarespace now!
Best,
Russell
I asked in the O forum, but I think they assumed I was familiar with DevTools. I didn’t know about the Discord server. Is Discord a type of forum software? I’ll check it out.
Thanks,
Russell
This is how css works 
. I used the DevTools to find the classes which are on every Heading (.cm-header-<1-6>) and found .cm-s-obsidian to be a class applied to the obsidian editor but not all of obsidian (this way things like your sidebar maintain the font of whichever theme you’re using)
I believe this happens when the particular vault is opened (since the file must be in the .obsidian folder inside the vault). It also automatically updates if you change the file 
Thanks for explaining. (based on your user ID, you’re Dustin?)
I feel I’m so close now, but it’s not showing the fonts I’ve specified in obsidian.css. Here are some screenshots to show what’s going on…
The snippets CSS file, shown in BBEdit:
My Obsidian settings for the snippets settings:
The tool tip for H2, listing the Rockwell font, but showing something like Times Roman:
The note in edit mode. The body text and H1 is Avenir, while the H2s and H3s are the Times Roman:
The note in preview mode. Looks like all Avenir.
Nothing is showing in edit or preview modes using the Rockwell and Verdana font I’ve specified in the CSS snippet. It would be fine if both modes used the same fonts, if that’s simpler.
I must be doing something terribly wrong. Thanks for you patience!
Regards,
Russell
Oh sorry! I was using <text> as a placeholder for whatever you’re inputting. If you remove the < and > from the font-families it should work.
.cm-s-obsidian,
.markdown-preview-view {
font-family: "Verdana";
}
.cm-header-1,
.cm-header-2,
.cm-header-3,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
font-family: "Rockwell";
}
This is updated to include in preview
That did it! And thanks for showing me how to extend it to the preview, where I’ll be mostly working when I’ve moved my documentation into Obsidian.
Thanks so much for your kind and patient help. That’s why I love the MPU forum!
Best,
Russell
1 Like
