0

I'm building a firefox extension. I need help with changing the font of the app. Using the docs on MDN, here

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

I've written my CSS as follows: 

@font-face
{
font-family: family-name;
src: url('OpenSans-Light.ttf'); 
}
@font-face
{
font-family: familynamebold;
src: url('open-sans.regular.ttf');
}

The font files are stored in same directory as the css file that's trying to load them. When I run the extension, the font doesn't change at all. On inspecting element, the CSS shows font-family: familynamebold; but I can't see any changes in the font itself.

Is it possible that it's not loading the font files? And if that's the case, then what should I be doing for Firefox to load the files?

Newtt
  • 6,050
  • 13
  • 68
  • 106
  • 1
    Are you using addon-sdk? What font do you need to change - some element on a particular webpage? – Kashif Jan 25 '14 at 03:25

1 Answers1

0

This is only for background. E. g. you dialog you want to build the plugin for. If you want enable it on a webpage, you must inject content_script with javascript into the current focused tab.

See here: http://blog.mozilla.org/addons/2011/09/01/add-on-sdk-faq-content-script-access/

And the something like

document.head.appendChild(doucment.createElement("style").appendChild(doucment.createTextNode("you css here")));
alpham8
  • 1,314
  • 2
  • 14
  • 32
  • So this one line script would be on all the pages inside the app? – Newtt Jan 24 '14 at 07:27
  • no, only on the current visible tab. But it will also change, if you change your tab (event driven). – alpham8 Jan 24 '14 at 08:27
  • So where exactly do I add this line? I'm sorry for asking, what I seem is, a trivial question but I have no clue on how to go about this. – Newtt Jan 24 '14 at 14:53
  • You got a background script where you initialize your add-on. And there you should add this line as discribed on the link. – alpham8 Jan 28 '14 at 07:09