How can I add an icon font on my web extension (Add-on, plugin)

Question

I am trying to add an icon font but some web pages block my font because I was using external URLs like this:

/* fallback */
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
   font-family: 'Material Icons', sans-serif, monospace, Arial, 
   Helvetica, Verdana, Futura;
   font-weight: lighter;
   font-style: normal;
   font-size: 1.5em;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
 }

The console error is showing this:

Refused to load the font 'data:font/woff;base64,.....ZU=' because it violates the following Content Security Policy directive: "default-src 'self' *.mozilla.net *.mozilla.org *.mozilla.com". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

I am not sure if I can load this font from an external server, so I have downloaded the font and I am trying to add this to my Add-on but I don't have success.

This is my root path:

- css
  - fonts
     - Material_Icons.woff2
     - msc-icons.css

- manifest.json

My Material_Icons.woff2:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('Material_Icons.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons', sans-serif, monospace, Arial, 
  Helvetica, Verdana, Futura;
}

My manifest.json:

  {

  "manifest_version": 2,
  "name": "xxx",
  "version": "1.0",

  "description": "xxx",

  "icons": {
    "48": "icon/msc.ico",
    "98": "icon/msc-x2.ico"
  },

  "content_security_policy": "script-src 'self' 
  https://*.fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-
  Y5UEw0lE80llgEseQY3FEmqw.woff2; object-src 'self'",

  "web_accessible_resources": [
      "./css/fonts/Material_Icons.woff2"
  ],

  "content_scripts": [
      {
          "matches": ["<all_urls>"],
          "js": ["./js/vue.js", "./js/msc-scripts.js"],
          "css": ["./css/msc-styles.css", "./css/fonts/msc-icons.css", 
          "./css/fonts/msc-fonts.css"]
      }
  ],

  "applications": {
      "gecko": {
      "id": "borderify@example.com"
      }
  }

}

I have added this to solve my first problem:

content_security_polic

And I added to solve my second problem:

web_accessible_resources

But I don't have success already.

Answer 1

In your manifest.json try to update this line with your own link.

 https://*.fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-

Y5UEw0lE80llgEseQY3FEmqw.woff2