Difficulties in customizing the Obsidian fonts

Help
1

Difficulties in customizing the Obsidian fonts

Dear Obsidian Community People,

yesterday I found Obsidian by reading an enthusiastic blog about this great software. After successfully downloading and installing it on Ubuntu I started exploring Obsidian. Many honest congratulations about a very great concept and it’s absolute great implementation!

Now I’d like to customize the Obsidian application font and want to change it to serif by using the TeX Computer Modern font.

By searching the Obsidian help documents where to change a font configuration I found notes about storing configuration files.

According to the help instructions I did the following:

  • Created an ‘obsidian.css’ file located in the active vault named ‘ObsidianVault’. The CSS file contains ‘@font-face’ declarations for Computer Modern font.

  • Opened the Obsidian settings dialog to activate custom css by switching the appropriate button. The applied ‘obsidian.css’ file is located in the active vault.

  • Saved Computer Modern fonts into directory ‘ObsidianVault/public/fonts’. The font files are formatted as OpenType (OTF) as well as Web Open Font Format (WOFF).

The font declarations in file ‘obsidian.css’ look like the following entries:

@font-face {
font-family: 'ComputerModern';
font-style: normal;
font-weight: normal;
src: url(public/fonts/cmunrm.otf);
}

@font-face {
font-family: 'ComputerModern';
font-style: italic;
font-weight: normal;
src: url(public/fonts/cmunti.otf);
}

@font-face {
font-family: 'ComputerModern';
font-style: normal;
font-weight: bold;
src: url(public/fonts/cmunbx.woff);
}

@font-face {
font-family: 'ComputerModern';
font-style: italic;
font-weight: bold;
src: url(public/fonts/cmunbi.woff);
}

...

:root {
  --default-font: 'ComputerModern', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
  --mermaid-font: var(--default-font);
  --reveal-font: var(--default-font);
  --font-monospace: 'Source Code Pro', monospace;
}

Unfortunately, the specified Computer Modern font is not used by Obsidian.

Despite it is listed in the fonts tree of the document (shown in the attached screen shot) the font files are not found.

What is wrong?

I did some CSS investigation:

Font faces can only be loaded from the same origin as the style sheet. URLs that point to a locally saved font file always represent a relative path.

I concluded this relative path must start in the same directory where the ‘obsidian.css’ file resides.

Any help and hints are very welcome.

Greetings from Peter

Screenshot_2020-10-31_09-39-10
Screenshot_2020-10-31_09-39-101343×719 108 KB

1 Like
2

I’m not sure about placing font as a file because I don’t know how styles handled by Electron and Obsidian software itself.

But if you install font In your system and place a correct font-family that should works.

I’m convinced what styles from obsidian.css are “injected” into the application and styles have no straightforward access to your files. But that’s just a guess.

1 Like
3

I think you’re right here. Electron is running a local HTTP server to get the app running. The team would have to read the font file and include it in one of their main templates to get this working. This feels very much like a plugin rather than core functionality.

I think you’re right also in installing the font you want to use on the OS then referencing the font in the CSS.

4

There hasn’t been any activity for 5 days, could you please see if you’d like to pick any of the existing answers as the solution, or do you still need help with something?

Would appreciate it if you could clarify on that, thanks!

If you’ve uncovered a bug, please post in #bug-reports. If you’re asking about a feature that’s not there yet, you can post in #feature-requests.

If this is about troubleshooting community plugins or themes, it might be a good idea to ask in #plugins and #css-themes on our Discord.

1 Like