1

I am trying to add font into Firefox extension.

I've managed to add style with PageMode:

pageMod.PageMod({ ...
...
contentStyleFile: [
...
self.data.url('font-awesome.min.css')
],

inside the css I have:

font-family:'FontAwesome';src:url('resource://extension_id/fonts/fontawesome-webfont.eot?v=4.0.3')

where extension_id is of course my ID.

when script loads I get:

downloadable font: download not allowed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: resource://extension_id/fonts/fontawesome-webfont.ttf?v=4.0.3 font-awesome.min.css

Cœur
  • 37,241
  • 25
  • 195
  • 267
wonglik
  • 1,043
  • 4
  • 18
  • 36
  • I know my answer doesn't exactly correspond, given that you're using an absolute URL, but the solution should work nevertheless. Let me know if it does. – willlma Jan 18 '14 at 03:47

2 Answers2

1

See docs: PageMod > Options > ContentStyleFile

You can't currently use relative URLs in stylesheets loaded in this way. For example, consider a CSS file that references an external file like this:

background: rgb(249, 249, 249) url('../../img/my-background.png') repeat-x top center;

If you attach this file using contentStyleFile, "my-background.png" will not be found.

As a workaround for this, you can build an absolute URL to a file in your "data" directory, and construct a contentStyle option embedding that URL in your rule. For example:

var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod").PageMod({
  include: "*",
  contentStyleFile: data.url("my-style.css"),
  // contentStyle is built dynamically here to include an absolute URL
  // for the file referenced by this CSS rule.
  // This workaround is needed because we can't use relative URLs
  // in contentStyleFile or contentStyle.
  contentStyle: "h1 { background: url(" + data.url("my-pic.jpg") + ")}"
});

This add-on uses a separate file "my-style.css", loaded using contentStyleFile, for all CSS rules except those that reference an external file. For the rule that needs to refer to "my-pic.jpg", which is stored in the add-on's "data" directory, it uses contentStyle.

willlma
  • 7,353
  • 2
  • 30
  • 45
  • this is not valid since a while. The documentation needs to be updated, thanks to point it out! – ZER0 Jan 19 '14 at 19:19
  • I knew there were a few bugs being worked on in regards to this, but didn't realize it had been solved. Thanks for the update. – willlma Jan 20 '14 at 04:18
  • It didn't work. I end up encoding fonts wit base64 instead. – wonglik Jan 20 '14 at 10:22
-1

The CSS's assets are relative to the CSS loaded. So you do not need to use absolute path, but just relative path.

ZER0
  • 24,846
  • 5
  • 51
  • 54