I am using the Firefox Add-on SDK to create an extension and am performing a PageMod. This code is in main.js.

...
exports.main = function() {
  var pageMod = require("sdk/page-mod");

  pageMod.PageMod({
    include: "*",
    contentScriptWhen: 'end',
    contentStyleFile: [
      self.data.url("css/style.css"),
      self.data.url("css/font-awesome.css")
    ],
    contentScriptFile: [
      self.data.url("js/jquery.js"),
      self.data.url("js/spritzify.js")
    ],
    onAttach: function onAttach(worker) {
      worker.postMessage("Hello World");
    }
  });
};
...

my css/font-awesome.css gets loaded into the page although the font files do not.

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

The fonts folder is in the data folder of my extension. Could someone please explain how I can load custom fonts into a webpage using PageMod!

I am using the Firefox Add-on SDK to create an extension and am performing a PageMod. This code is in main.js.

...
exports.main = function() {
  var pageMod = require("sdk/page-mod");

  pageMod.PageMod({
    include: "*",
    contentScriptWhen: 'end',
    contentStyleFile: [
      self.data.url("css/style.css"),
      self.data.url("css/font-awesome.css")
    ],
    contentScriptFile: [
      self.data.url("js/jquery.js"),
      self.data.url("js/spritzify.js")
    ],
    onAttach: function onAttach(worker) {
      worker.postMessage("Hello World");
    }
  });
};
...

my css/font-awesome.css gets loaded into the page although the font files do not.

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

The fonts folder is in the data folder of my extension. Could someone please explain how I can load custom fonts into a webpage using PageMod!

• javascript
• fonts
• firefox-addon
• firefox-addon-sdk

• Interestingly, there are already at least two duplicates of your question (stackoverflow./q/21172670/785541 and stackoverflow./q/19808064/785541), both without a proper answer. – Wladimir Palant Commented Jun 23, 2014 at 6:38

3 Answers 3

If you look into the console messages, this is what you should see:

downloadable font: download not allowed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed

Unfortunately for you, web fonts are subject to the same-origin policy which can only be relaxed via CORS. This means that there is no way to load the font file from an extension URL as there is no way to use CORS there.

This leaves you with two options:

1. You host the font on a web server with proper CORS headers or use some existing font hosting.
2. You encode the font as a data: URI. There is a number of data: URI generators available, e.g. this one.

IMHO the second solution is the preferable one as your extension won't be dependent on any web servers, especially not third-party web servers. Also, it won't introduce any delays caused by font downloading. I tried it and it worked fine:

@font-face {
  font-family: 'FontAwesome';
  src: url('data:application/octet-stream;base64,d09GRgAB...') format('woff');
  font-weight: normal;
  font-style: normal;
} 

Side-note: You don't need the full backwards patibility dance in a Firefox extension, it's sufficient to have the font in the WOFF format.

The best answer I have found is here: https://stackoverflow./a/39971918/1635421

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

Which is analogous to this method for Chrome: src: url('chrome-extension://MSG@@extension_id_/fonts/...

I think you need to use absolute paths in those url fields. So figure out what seld.data.url('fonts') (by like console.log'ing it) (the path should be something like resource://weraweraer-at-jetpack/data/fonts) and then update your url's to use that path.

I'm pretty sure this should work because resource url's don't have security restrictions. See this page here: https://developer.mozilla/en-US/docs/Chrome_Registration#resource

It says:

Note: There are no security restrictions preventing web content from including content at resource: URIs, so take care what you make visible there.