Using Custom Fonts

[ShahriarKh]

I just want to post a simple way to use custom fonts.
The idea is to replace the default fonts (Helvetica for normal, Cascadia for monospace and Virgil for handwriting) with other fonts.

1. Create a new css snippet in Obsidian
2. Convert your font to base64 (you can use this snippet)
3. Declare a font face, using your own font, but with excalidraw font names

Example for replacing handwriting font by using "Balsamiq Sans" instead of "Virgil":

@font-face {
  font-family: Virgil; /* excalidraw font name to replace */
  src: url("data:application/octet-stream;base64,AAEAAf+s......DMYytv"); /* (truncated) */
}

If embedded diagrams doesn't show font correctly, add this too:

.excalidraw-svg text[font-family^="Virgil"] {
  font-family: /*your font name*/;
}

.excalidraw-svg text[font-family^="Helvetica"] {
  font-family: /*your font name*/;
}

.excalidraw-svg text[font-family^="Cascadia"] {
  font-family: /*your font name*/;
}

[CuneytAk]

@ShahriarKh Can you send your code here? css snippet?

[ShahriarKh]

The code is the one I posted above 👀

[CuneytAk]

Yes thank you very much. But nothing has change unfortunately. Maybe your css file change something and i understand where i went wrong.