Firefox AddOn: Font references not loading

0
votes

I have a Chrome Extension I am in the midst of porting over to a Firefox AddOn. The extension is built with React and Webpack. The font references in the SCSS files (and generated CSS files) are using this to reference the URLs:

src: url("chrome-extension://__MSG_@@extension_id__/static/fonts/Muli-Regular.ttf") format("truetype");

And this works great for Chrome. However, in the ported version to Firefox, the fonts don't load. How do I reference the fonts location in Firefox?

1
google-chrome-extensionfirefox-addon
Won't work in FF. See MDN: the UUID is random so I guess you'll have to read the file with XHR/fetch, replace the URLs using browser.runtime.getURL, then use browser.tabs.insertCSS. - wOxxOm
Actually just removing the entire chrome-extension://__MSG_@@extension_id__ and using the path without the prefix works fine. - TWLATL
The full URL is needed when you inject CSS into the web page via content_scripts key or using browser.tabs.insertCSS. It's not needed in extension's own pages. - wOxxOm

1 Answers

0
votes

Seems FF AddOns will allow you to reference fonts from your CSS with just the direct path. Removing the chrome-extension://__MSG_@@extension_id__ from the URL works fine.