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.

[edu-jjs]

Hello,

I followed your guidance. But only the "Helvetica" font was modified.

It seems that the other fonts are not identified or that excalidraw internally uses another name for them.

Any suggestions on how to change the other fonts?

@font-face {
	font-family: 'Excalifont';
	src: url("data:application/octet-stream;base64,AAEAAAANAIAA.....................FRkD+TYEA=");
}

@font-face {
	font-family: 'Cascadia';
	src: url("data:application/octet-stream;base64,AAEAAAANAIAA.....................FRkD+TYEA=");
}

@font-face {
	font-family: 'Comic Shanns';
	src: url("data:application/octet-stream;base64,AAEAAAANAIAA.....................FRkD+TYEA=");
}

@font-face {
	font-family: 'Helvetica';
	src: url("data:application/octet-stream;base64,AAEAAAANAIAA.....................FRkD+TYEA=");
}

@font-face {
	font-family: 'Lilita One';
	src: url("data:application/octet-stream;base64,AAEAAAANAIAA.....................FRkD+TYEA=");
}

@font-face {
	font-family: 'Nunito';
	src: url("data:application/octet-stream;base64,AAEAAAANAIAA.....................FRkD+TYEA=");
}

@font-face {
	font-family: 'Virgil';
	src: url("data:application/octet-stream;base64,AAEAAAANAIAA.....................FRkD+TYEA=");
}