How to load a font from an extension?

Add-ons Development
#1

Hi there,

I’m building a extension and I’m trying to include a font in it but I can’t make it work.
I tried using resource: and data: with no luck.

The error using resource: is:

downloadable font: download not allowed (font-family: "my-font" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: resource://my-extension/data/font/my-font.woff

and the error using data: is:

Content Security Policy: The page's settings blocked the loading of a resource at data:application/font-woff;base64,.... ("font-src https://blah.blah.com").

Is it possible to load the font in some other way?

Thanks.

#2

What are you trying to do? Is the font used in an HTML page in your add-on, is it being injected into page content to modify the way it looks, or something else?

#3

Thanks for your reply.
It’s a font-icon, and it’s injected into page content. The extension adds functionality to an existing website and that new functionality needs some icons not available in that website, so that’s why I want to load the font with my icons.

#4

In that case it may be easier to have the site load the remote font instead of trying to load it from your add-on code. This is assuming that the font is hosted somewhere public.

#5

If you are doing this from a classic bootstrap addon, you will have to add contentaccessible=true in your manifest. This is an example of it - https://gist.github.com/Noitidart/9406437#file-chrome-manifest - Then place your font in that path for which you assigned contentaccessible. Then voila it will work.

If you want to do this from an SDK addon, I’m not so sure why it doesn’t work. If you are loading self.data.url('file name blah') its a resource URI. But anyways, I think the equivalent of contentaccessible is to package.json add this:

  "permissions": {
     "cross-domain-content": ["https://data.com"]
  }

For the classic bootstrap method, I am absolutely sure that will fix your problem. For SDK, I’m not so sure.