How to easily change the font of titles and headings

Help
1

What I’m trying to do

Change the font of headings and titles, including the title that comes from the file name.

Things I have tried

Searched the forum and google. Seems the solution is to use the custom css stuff. But every css example is completely different. Some are hundreds of lines, some are one line. I figured out how to change the heading font, but can’t manage to change the title font. “–variable-name” doesn’t seem to work either.

Here’s what I have so far:

.view-header-title { font-family: Georgia;}

/* change header font in editing view */
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
    font-family: Georgia !important;
}

/* change header font in reading view */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
    font-family: Georgia !important;
}

obsidian-font-thing
obsidian-font-thing1536×715 73 KB

1 Like
2

search-tabs
search-tabs657×1065 71.4 KB

3

In this case, I think your best bet is using the custom theme variables/properties that are built-in and ready to go. They can be found in the link and also in the app.css file in the developer tools.

The inline title picks up the --h1-font value by default, but I added that in (commented out) for if you want to change it later. Give this a try:

body {
    /* --inline-title-font: var(--h1-font); */
    --h1-font: Georgia;
    --h2-font: Georgia;
    --h3-font: Georgia;
    --h4-font: Georgia;
    --h5-font: Georgia;
    --h6-font: Georgia;
}

Have a good look over this post as well:

1 Like
4

Yes this works! Thank you for the kind response!

5

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