How to use @font-face on a Firefox WebExtension

Question

I'm trying to port a Chrome extension Firefox add-on using the WebExtensions API . In chrome extension I am using

src: url('chrome-extension://__MSG_@@extension_id__/css/fonts/webFonts/font-awesome/fontawesome-webfont.eot?v=4.5.0');

to include fonts. What should I use in Firefox WebExtension?

Since I can't use browser.extension.getURL() in a CSS file, how can I use @font-face with a local font file?

Berndt

Isnt it possible to use relative urls? Just skip the chrome-extension://id part? – Jolenejolenta

@DanielHerr no its not working. I am injecting fonts in content script,by using relative path it will use current url's path – Berndt

Try this SO thread. An answer seems to have been provided. – Greensboro

Answer 1

Use "moz-extension://..."

src: url('moz-extension://__MSG_@@extension_id__/css/fonts/webFonts/font-awesome/fontawesome-webfont.eot?v=4.5.0');

Septuagint

Answer 2

You can turn it into a data uri with this: http://dopiaza.org/tools/datauri/index.php then your css would look like src:("data:application/font-woff;base64,.....") format("woff");

I do this here -

https://github.com/Noitidart/NativeShot/blob/32d3bd62bb217b9d5a72fea29d41a426b158bdac/resources/styles/editor.css#L651

Hallowed