How to change font?

Help
1

I am trying to change the font and I searched forums. Everyone advises to change it in obsidian.css but I can’t find it anywhere. Can you show me the exact location of that file? (Windows 10)

5 Likes
2

Here’s what I do:

  • Open Obsidian’s Options menu

  • Select “Appearance” tab

  • Under CSS Snippets, select “Open snippets folder” icon

  • Create a blank text file in that folder with the suffix “.css” (“My Font.css”, for example)

  • Type the following 4 lines (switch “Times New Roman” to any font you wish) (use regular single quotes, not the fancy quotes this forum software corrects it to):

    {
    font-family: 'Times New Roman', serif !important;
    }

  • Save the file

  • Back in Obsidian, click the “Reload snippets” icon

  • Now you can activate your font setting (snippet) for any theme!

15 Likes
3

Thank you that worked.

4

That didn’t work for me. Any other ideas please?

6

Is it possible to use different fonts in the view mode vs. editor mode in a similar way?

I know there are designs themes like “minimal” but they come with other disadvantages…
Usually good typography design rules are asking for serif-fonts in view (read) mode.

So I’d like to have the following results after applying the changes…

  • editor-mode fonts:
  1. Textbody: sans serif font of my choice + size adjustable
  2. Sourcecode: sans serif font of my choice + size adjustable
  • preview-mode fonts:
  1. Textbody: serif font of my choice + size adjustable
  2. Sourcecode: sans serif font of my choice + size adjustable

This helps to:

  • recognize immediately in which mode your openend document is - edit or view…
  • makes longer documents better readable in preview mode (typo rules!)
  • allows you to safe screenspace in editor mode by modifying the Fontsize and fonttype

Thx for your help

1 Like
7

Hi there,

I started using playing around with Obsidian and I’m trying to figure out how to change the font in both preview and edit mode.
The CSS file in Snippets didn’t work for me. I put the following in the file, but no results:
{
font-family: ‘Times New Roman’, serif !important;
}

Any ideas?
Thanks.

1 Like
8

Hello, @aalonso. Did you activate the snippet? If not, go to appearance. Under CSS Snippets, check the box to activate it. Hope that helped.

9

Hi, thanks for your answer. Yes, I activated the snippet and also restarted Obsidian. No results.

10

Assuming you have the stock Obsidian theme, try this:

:root {
--default-font: ‘Times New Roman’, serif;
}

Be sure to activate it. If it doesn’t work, then use !Important; after serif.

6 Likes
11

It worked, BUT I’m finding Times New Roman small. So, I’d tried to change to Palatino Linotype and it doesn’t work. Any ideas? One more thing: I’m using a theme called Blue Topaz (dark mode) and I like to keep the original fonts for everything (headings etc.) but the normal level text (the main text of the note). Is there a way to implement such a change?
Thanks once more.

12

There is a text size slider under the appearance tab you could use. However, each installable theme has its own CSS for making more minute changes. I’m not familiar with the options for Blue Topaz, although it’s a beautiful theme. Until you’re more comfortable editing CSS, perhaps you might consider something like “ITS Theme.” It has a considerable range of custom settings through the Style Setting plugin, including those necessary for making font size adjustments to your hearts content.

13

It worked with ITS theme (not with Blue Topaz). Thanks for your help and pacience.

14

Today I successfully changed the font using a custom CSS file. However, I had to resorted to use the “Toggle Developer Tools” to inspect the DOM.

With Obsidian default theme, to change the font:

/* Set fonts for both Edit and Preview mode
.view-content {
  font-family: 'Courier New', monospace !important;
}
*/

.markdown-source-view {
  font-family: 'JetBrainsMono Nerd Font', Menlo, Monaco, 'Courier New', monospace !important;
}

.markdown-preview-view {
  font-family: Lora, sans-serif !important;
}

Please make sure that you activate the snippet under Settings > Appearance > CSS snippets.

9 Likes
16

thank you for sharing! for some reason, my old .css file to change font didn’t work.

17

A bit late to the party, but for people stumbling upon this thread:

I am using the solution provided by @Genzer

I found the serif fonts to be a bit too small as well and I scaled them up like so:

.markdown-preview-view {
  font-family: "TeX Gyre Pagella", sans-serif !important;
  font-size: calc(var(--editor-font-size) * 1.2);
}

In my case, this approx. matches the source editor font.

2 Likes
18

Great tips! But they don’t address inline code and code blocks. For a full monospace experience in the editor I ended up doing something like:

.markdown-source-view, .cm-inline-code, .HyperMD-codeblock {
    font-family: 'Azeret Mono' !important;
    font-size: var(--editor-font-size) !important;
}

It’s pretty disappointing having to go down to this level, though, and I’m expecting this to break with a future upgrade or a change of theme.

3 Likes
19

I want to change my obsidian font to “IRANSans” & I use “Farsi” for my docs but non of above solutions worked for me.
Farsi is a right to left language so does it make a difference?
When I use above solutions it changes the font but not to IRANSans, it changes to Times New Roman or Arial I think …!
Is there any way to solve this?

20

This worked for me! Just adding one other class for anyone else looking at this and wants consistency between other text elements :slight_smile:

Setting properties for the class .view-header-title will affect the text in the title above the editor pane.

Example:

.view-header-title {
 font-size: 14px;
 font-family: 'SF Mono', Menlo, Monaco, monospace;
}
3 Likes
21

This doesn’t seem to work anymore with the new editor with live preview. The font gets applied only if I check “use legacy editor” in the Editor setting.

2 Likes
22

anyone figure out what the new class is for live preview?