How to add custom fonts for theming plugin?

[Sinacs]

I'm not so sure why the codes do not work in Joplin, but it works fine when testing it based on a web page environment. Please let me know if there is anything I've missed.

Details

---

Win11Pro | Joplin v2.9.12

---

My purpose is to add custom fonts to my theming plugin as the built-in font for it.

Below showing how I do it:

1. In my case, I'm using the method below to load all CSS codes of my theme:

joplin.plugins.register({
	onStart: async function() {
		const installDir = await joplin.plugins.installationDir();
		const chromeCssFilePath = installDir + '/chrome.css';
		const noteCssFilePath = installDir + '/note.css';
    
		await prepareThemeSettings();
		await writeUserCSS();

		await (Joplin as any).window.loadChromeCssFile(chromeCssFilePath);
		await (Joplin as any).window.loadNoteCssFile(noteCssFilePath);

	},
});

2. In my plugin repo, I've created a fonts folder inside the src folder to hold all custom fonts.
3. In my CSS file, I'm using the @font-face to use those fonts like below:

@font-face {
  font-family: "d-montserrat";
  src: url(./fonts/montserrat/Montserrat-Regular.ttf) format("truetype");
  font-weight: 400;
}

:root {
  --usp-base-font: "d-montserrat";
}

#rendered-md p {
  font-family: var(--usp-base-font, sans-serif);
}

4. I finally got this error in the console when Joplin loaded my plugin font files:

Failed to load resource: net::ERR_FILE_NOT_FOUND

[Daeraxa]

Not sure if it is exactly the same but I remember asking something similar a long time ago for a plugin theme. I believe it was to do with the actual joplin installation path.

Fontawesome replacement font not displaying

I'm going insane trying to get this to work so I'm wondering if anyone has an idea how to accomplish this. My current little project is a reskin of Joplin to have a go at some Joplin related CSS and getting it published as a plugin theme. So far it has all gone pretty well, things are looking good (even if the process has been somewhat complicated in many places) however I've got to a point where I'm totally stuck. The plan is to replace the current fontawesome icons with a new set and no mat…

[Sinacs]

Oh! I think you're right! I will give it a try later. This problem is driving me crazy too😵, I got stuck into it quite a long time.

Thank you for the helpful details!

[Sinacs]

For someone who has the same problem as me, I hope the information below can give a little help:

---

When using the relative path starting with ./ in userchrome.css it will be located to:

{User}/AppData/Local/Programs/Joplin/resources/app.asar

---

When using the relative path starting with ./ in userstyle.css it will be located to:

(User}/.config/Joplin-desktop/{Joplin Profile}/tmp

---

As you see, they are far away from each other.

The above paths were found based on the plugin testing environment, which means entering the jpl file path into tools > options > plugins > show advanced settings > development plugins. I don't know if the path might be different when installing the plugin as normal, but I think it might not a good idea to use the external sources directly in the userstyle.css and userchrom.css. However, as @Daeraxa suggested, using the "absolute path" is totally fine if only for personal use.

[Daeraxa]

I can't remember which plugin I was looking at now to get ideas, probably the macOS theme, but I think I came to the conclusion that essentially the .css file would have to be created programmatically after it gets things like the resource dir from the API.

[Sinacs]

Ya, so whatever I tried, if I keep using the loadChromeCssFile(); and loadNoteCssFile(); to load the CSS, the problem won't change.

@Daeraxa

I came to the conclusion that essentially the .css file would have to be created programmatically after it gets things like the resource dir from the API.

Umm... I realized that, and I think I'm not familiar with this way, so I can only give up for now. If Joplin created one more loadSrc() method for this case, it would be saving me. Anyway, thx D!