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?

Isnt it possible to use relative urls? Just skip the chrome-extension://id part? — Daniel Herr, Jun 21 '16 at 16:52
@DanielHerr no its not working. I am injecting fonts in content script,by using relative path it will use current url's path — Shweta Matkar, Jun 22 '16 at 06:54
Try this [SO thread](http://stackoverflow.com/questions/24357596/firefox-extension-custom-fonts). An answer seems to have been provided. — ReyAnthonyRenacia, Jun 23 '16 at 01:54

score 2 · Answer 1 · answered Oct 11 '16 at 06:58

2

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

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

answered Oct 11 '16 at 06:58

Dmitry Artamoshkin

116
6

score 0 · Answer 2 · answered Jul 04 '16 at 00:07

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

How to use @font-face on a Firefox WebExtension

2 Answers2

Linked