How to add fonts in JS file?

Add-ons Development
1

Hello there,
I have a JavaScipt file as “content_scripts”, I want to add some fonts, I created a Css file and used Font-face to add fonts, then i edited the “content_scripts” as you see bellow :

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["frontend.js"],
	  "css": ["font-face.css"],
      "run_at": "document_start"
    }
  ],

but I can’t use the fonts in JS file. I don’t know how to solve it.

2

I think, after you added the font to the web_accessible_resources, you can reference it by its absolute path (starting with a /).

If that doesn’t work, inline it as a base64 URL. There are converter tools online.

3

Thank you so much Niklas,
But it didn’t work for me. maybe it’s better to share the source code with you.
this is the js file : https://github.com/QWERTYUIOPYOZO/ReFont/blob/master/src/refont.js
it uses the system files to change the web pages fonts but i want to define fonts with css Font-Face to use in extension. But all the ways I tried, never answered.

4

Well, as I said, one way to inject the font is as a data: URL.
Except for maybe typos, this should work:

async function injectFontIntoAllPages({ name, path, weight, style, type, }) {
	const data = await fetchAsDataUrl(path);
	type = type || (/\/(.*?);/).exec(data)[1]; // this may not work correctly
	const code = `@font-face {
		font-family: '${name}';
		font-weight: ${weight};
		font-style: ${style};
		src: ${data} format('${type}');
	}`;
	return browser.contentScripts.register({
		css: { code, },
		allFrames: true, matchAboutBlank: true,
		matches: '<all_urls>', runAt: 'document_start',
	});
}

/// Downloads an online resource or loads a bundled file by absolute path
/// and returns it as base64 `data:` URL with MIME-type.
function fetchAsDataUrl(url) {
	return fetch(url)
	.then(_=>_.blob()).then(blob => new Promise((onload, onerror) => {
		Object.assign(new FileReader, {
			onerror, onload() { onload(this.result); },
		}).readAsDataURL(blob);
	}));
}
5

Thank you so much bro <3
excuse me, but i don’t understand JavaScript. so i don’t know where to paste these codes and where i should set the font files.
thanks again for helping.