How can one use custom fonts

[vermillon]

Hi all!

Obsidian newbie here

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:

GET app://obsidian.md/CuneiformOB.ttf net::ERR_FILE_NOT_FOUND

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('http://0.0.0.0:8000/CuneiformOB.ttf');
}

but that gives:

Refused to load the font 'http://0.0.0.0:8000/CuneiformOB.ttf' 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://obsidian.md/CuneiformOB.ttf 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?

[sam.baron]

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 https://forum.obsidian.md/t/iframe-of-local-html-file-is-not-showing-anything/4648/2

I suggest filing a feature request.

[vermillon]

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).

[sam.baron]

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.

[vermillon]

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?

[sam.baron]

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.

[Dor]

@vermillon

it’s not a system-wide font

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

[vermillon]

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)

[quilesca]

Hi I’m using an iPad, after a few finicking around and my iPad crashing, it worked!

I installed my custom with the ifont app.

put the font in a folder in my themes.

Changed the css to below so I could edit the edit mode monospace font (because I was frustrated with waiting CJK monospace font)

I was using the Atom theme

body { --font-monospace: 'NotoSansMonoCJKsc-Regular', monospace; src: url('fonts/NotoSansMonoCJKsc-Regular.otf'); }

[Tosakun]

Can you show how exactly you managed to do that?

[quilesca]

Hi, Sorry I didn’t see this until now

The app I use to edit the code is “Textastic”

After I install the font, I have to turn the ipad off and on again too.