Change font face only for specific documents

Custom CSS & Theme Design
1

how can i apply a css snippet that changes font only in specific documents? i tried, but couldn’t get it to work. i’d like it to be a snippet i don’t have to add to each of the documents because i prefer my properies to stay short for design reasons, so it would be better to add the document path inside the css. example (yes, i have the sora font installed in this case and it works if i apply it as default font, just not if i use a different default font and try adding it with css instead. also this code was ai generated, i have no idea if it’s even correct, this is just what i tried in different variations)

div[data-path="example.md"] .markdown-preview-view,
div[data-path="example.md"] .markdown-source-view {
    font-family: 'Sora', sans-serif !important;
}
2

Since you don’t want to add cssclasses in the front matter, another alternative is to use this plugin. I don’t think it’s possible any other way other than the two above

1 Like
3

ok, i understand that this is very likely what i was looking for. however, i don’t know how to even write the code for the fonts at all. is the above code correct or not? i guess it’s not just some “font face”/“font-family” thing, it can’t be that simple?

4

ok, actually i figured out how to make the font work. it’s indeed not that simple, but i found a thread with a solution. anyway, it now adds the font to ALL documents despite being defined for only a specific folder. i tried with cssclass despite not really wanting that. i also tried the plugin above. no matter what, it adds the font to EVERYTHING…

5

Using a cssclass to change fonts per-note would look something like this:

If you want the same font for all viewing modes, it could be simplified to:

/* change <cssclasshere> for each snippet & note */
.markdown-source-view.cssclasshere .cm-scroller, .markdown-preview-view.cssclasshere {
    font-family: 'Comic Sans MS';
}

and I usually add this if I don’t want the inline-title and Properties font to change:

/* revert inline-title and properties font <cssclasshere> note(s) */
.cssclasshere :is(.inline-title, .metadata-container) {
    font-family: var(--font-text); 
}

Using the plugin efemkay suggested is working on my end, no cssclasses: in the note needed. Set the path, the class, and reload/restart Obsidian.

Screenshot 2024-07-17 074245

Screenshot 2024-07-17 075305
Screenshot 2024-07-17 075305670×616 33 KB

6

ugh, it actually works. i wrote a post about how it doesn’t and then noticed a comma missing in my code. it works now. thank you

7

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