Custom font with css for Callout title

[Ian.Otter.444]

I’m trying to give a custom callout i’m creating in css a custom fontface i have in the same directory. I have the .ttf file for it and have the fontface definition for it in the snippet, but the font does not render at all, it gets replaced by some default simple font. I’ve checked if any other font works and the already integrated fonts do work, but mine doesn’t. Here’s how my snippet looks like:

@font-face {
  font-family: 'Fleaur De Leah';
  src: url('fonts/FleurDeLeah-Regular.ttf');
}
@font-face {
  font-family: 'Luxurious Script';
  src: url('fonts/LuxuriousScript-Regular.ttf');
}

.callout[data-callout="title"] .callout-icon {
  display: none;
}

.callout[data-callout="title"] {
	--callout-icon: lucide-activity;
}

.callout[data-callout="title"]{
  --callout-color: 255, 255, 255, 0;
  --callout-title-color: var(--accent-color);
  font-family: "Fleaur De Leah", "Luxurious Script";
  --callout-title-size: 2.8em;
}
.callout[data-callout="title"] .callout-title {
  font-family: "Fleaur De Leah", "Luxurious Script";
}

And what I have in my note:

>[!title] The Journal

It sould look like either of these two:

or

but instead it looks like this :
What could be the problem with displaying these fonts? I’ve tried in the past to give custom downloaded fonts to specific elements unsuccessfully. I do not have these fonts installed into my computer’s system and I don’t know if that could be the issue here.


And, to clarify, the snippet is active. It is the one that is making the note purple.

PLease helppp

[dawni]

It won’t work with a path to the ttf.

You’ll need to either install the font on your system or embed the font in your CSS using base64 encoding.

[Ian.Otter.444]

Thank you, I didn’t know the base64 option existed, i didn’t want to install de font in my system because I’ve had some issues when trying to install fonts

[Ian.Otter.444]

Okay, so after converting the font to a ton of different filetypes (just 3) i ended up with this:

@font-face {
  font-family: 'NAME OF YOUR FONT';
  src: url("data:font/woff2;base64,LIGHT_YEARS_LONG_BASE64_STRING");
}
.callout[data-callout="NAME OF YOUR CALLOUT"]{
  --callout-color: 255, 255, 255, 0;
  --callout-title-color: var(--accent-color);
  font-family: "NAME OF YOUR FONT", "Other Font";
  --callout-title-size: 3.5em; /*the fontsize of your callout's title*/
}

I used this page to convert my .ttf to .woff: products.aspose.app/font/conversion/ttf-to-woff

Then the .woff to .woff2 here: products.aspose.app/font/conversion/woff-to-woff2

Then the .woff2 to base64 here: products.aspose.app/font/base64/woff2

I converted from ttf to woff2 because apparently woff2 is much shorter than ttf when encoded base64.