Cannot get custom fonts to load in obsidian css snippet

[Morteza_NW]

Hi everyone, I’ve been trying to use custom fonts locally in Obsidian via a CSS snippet, but nothing is working — not even simple tests.

What I want:
Set custom fonts for UI, note text (English & Persian), and code blocks using a CSS snippet in my vault.
Have the fonts stored in the vault itself (not installed on the OS), so it works across devices.
Works with the default theme, desktop Obsidian.

What I tried:

1. Put fonts in a fonts folder at both vault root and later inside .obsidian/fonts/

2. Used @font-face with relative paths like:

   @font-face {
     font-family: "AmpleSoftVault";
     src: url("../fonts/Ample Soft Pro/AmpleSoftPro-Regular.woff2") format("woff2");
   }
   

3. Tried quoting paths and escaping spaces (e.g. "Ample Soft Pro" and Ample\ Soft\ Pro)

4. Used CSS variables (--font-text, --font-interface, --font-monospace) and applied to selectors:

   .markdown-preview-view, .markdown-source-view {
     font-family: var(--font-text) !important;
   }
   

5. Validated that snippets are loaded (a border test on .app-container worked)

What is not working:
Custom font faces are not applied — not to text, UI, or code.
Files are in the correct relative folders.
Fonts are .woff2.
Even simple font‑family changes don’t affect rendering.

Setup details:

• Vault path example (with spaces, Google Drive):
  C:\Users\NightWatch\My Drive\Obsidian\The World\fonts\…

• Snippet is here:
  …\The World\.obsidian\snippets\fonts.css

• Fonts used:

  • Ample Soft Pro (English)
  • Estedad (Persian)
  • JetBrains Mono (monospace)

• I ensured snippet loads (red border test works).

Example of full snippet I tried: (omitted here for brevity — I’ll include in comments if needed)

What I suspect but can’t confirm:

1. Relative paths with spaces don’t resolve under Electron/Chromium.
2. Snippets may load before fonts can be resolved.
3. Variation between live preview vs reading mode selectors.
4. Theme overrides even with !important.

---

Questions:

1. Does anyone know the correct way to reference vault‑local font files (with spaces in folder names) in an Obsidian snippet so that the fonts actually load?
2. Should I be using absolute file paths (and if so, what format works cross‑platform)?
3. Is there a different set of selectors required to override UI text, editor text, and code blocks?
4. Has anyone successfully used Persian/Unicode fonts in code blocks with a snippet?

Thanks so much in advance — I’ve been stuck for a while and it’s driving me nuts!

[ariehen]

Obsidian’s CSS can’t use local files (images, fonts, etc.). If you want something to be local it needs to be base64 encoded and in the .css file. This link is for theme development but it’s the same process.

Have a web search, search here, or in Obsidian’s Discord server (the #appearance channel) for websites to convert fonts to base64 that can be used in snippets and themes.

---

You could also have a look at https://github.com/pourmand1376/obsidian-custom-font, but I haven’t tried it myself.

[Morteza_NW]

omm, there was someone in reddit that said it too, i wasn’t sure about it so i posted here too, (maybe you are that guy ) anyway, why obsidian would do such a thing? is there any documentation regard access to local files that specifically say such a thing? maybe im going overboard by persisting on it, don’t know​:head_shaking_vertically:

[ariehen]

I don’t post on reddit so that wasn’t me. Ha!

A question on Discord:

Also, why in the name of God would accessing local files be disabled in a CSS system intended to access local files??

A team member replied:

it’s disabled because it could give attackers access to all files on your computer

---

This is about local images, but the same situation:

LOCAL background image in CSS not working

Embedding local files using CSS is blocked for security reasons.

LOCAL background image in CSS not working

There used to be a way that made it possible for CSS to embed local files Unfortunately that also made if possible for an attacker to read the content of other files, if some code would be embedded in a website, that a user would load via an iframe. CVE-2023-2110 if you are curious about the details

[Morteza_NW]

wow, many thanks, that was very thoughtful of you, im really satisfied with the result, be well then