How can one use custom fonts

Hi all!

Obsidian newbie here :slight_smile:

I’m trying to make Obsidian display text in a specific font whose file I have stored in my vault. I’ve managed to use obsidian.css to change the size of the font or load a pre-installed font, but not the font I need. I’ve tried a few things:

The font file is placed in my vault, next to obsidian.css

I’ve defined a CSS class and a @font-face as follows:

@font-face {
  font-family: CuneiformOB;
  src: url('CuneiformOB.ttf');

which gets me:


I have also tried:

@font-face {
  font-family: CuneiformOB;
  src: url('file:///home/...../obsidian/CuneiformOB.ttf');

which gives

app.js:1 Not allowed to load local resource: file:///home/.../CuneiformOB.ttf

I have then tried serving it from a local server:

@font-face {
  font-family: CuneiformOB;
  src: url('');

but that gives:

Refused to load the font '' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 

Finally, if I remove url() and keep either CuneiformOB.ttf or file:///…/CuneiformOB.ttf , no error but no font applied either…

I guess the main problem is that I don’t know where to put the font for app:// to resolve. My question is therefore: where should I store the font (it’s not a system-wide font) and how should I specify/register it?

Or is this a feature request? :slight_smile:

which gives
app.js:1 Not allowed to load local resource: file:///home/…/CuneiformOB.ttf

So this might be the issue and might be related to this

I suggest filing a feature request.

OK, please don’t move this ticket away while I try to find some time to write a feature request.
I think it is not completely related to the post you’re pointing to, as using file:// is probably a poor substitute for url(‘filename’) working out of the box (after all, that’s the point of having a vault, to be able to refer to things within that vault; Anki supports that for instance).

It has to do with Electron (the desktop app framework Obsidian uses) allowing access to local resources. This would be no different than a website trying to access a font file from your local computer - your browser won’t allow it for security reasons.

Why is Obsidian able to find my obsidian.css and all my .md notes but not a file that sits in the same directory, though?

Those categories of files are being accessed through two completely different mechanisms. All I can tell you for now is that you should make a #feature-requests.

Why wouldn’t you want it as a system-wide font?

Primarily because I’m too lazy to learn to manage font precedence on my system, and I don’t want that font to become the main font for that script (which it does when installed).

This would also allow me to synchronise between devices without having to install fonts on all of them (and of course, the day we have an app, I won’t be able to install those fonts)