title: Chrome extension: Font Awesome not loading font files
body: <p>I've been struggling with this for a while, so thought it was time to post here, as none of the similar questions helped.</p>
  
  <p>I've tried a few things so far. Font awesome version (5.0.9)</p>
  
  <p>1) include <strong>fontawesome-all.min.css</strong> to the contentscript, and modify the @font-face urls in the css file to suit the chrome extension path.</p>
  
  <pre><code>"content_scripts": [
  {
    "matches": ["http://*/*", "https://*/*"],
    "js": ["contentscript.js"],
    "css": ["assets/css/fontawesome-all.min.css"]
  }
  ],
  "permissions": [
      "cookies", "tabs", "notifications", "storage", "identity", "&lt;all_urls&gt;"
  ],
   "web_accessible_resources": [
      "modal.html", "style.css", "assets/images/*", "assets/css/*", "assets/webfonts/*", "assets/js/*"
  ]
  </code></pre>
  
  <p>Here's an example of how one of the @font-face urls look like.</p>
  
  <pre><code>@font-face{font-family:Font Awesome\ 5 Pro;font-style:normal;font-weight:300;src:url(chrome-extension://&lt;extension_id&gt;/assets/webfonts/fa-light-300.woff2) format("woff2")}
  </code></pre>
  
  <p>When I do this, it seems the <strong>fontawesome-all.min.css</strong> is not loaded at all, when I look at the Networks tab.</p>
  
  <p>2) Include css file in contentscript.js (CSS is loaded but not the icon fonts)</p>
  
  <pre><code>// Add Fontawesome library
      var link = document.createElement("link")
      link.type = "text/css";
      link.rel = "stylesheet";
      link.href = chrome.runtime.getURL('assets/css/fontawesome-all.min.css');
      shadow.appendChild(link);
  </code></pre>
  
  <p>As mentioned, this shows the "square" icons, but not the correct ones. I can also see that the css file is loaded in the Networks tab, however, the icon fonts are still not being loaded. Why?</p>
  
  <p>I'm loading this inside a Shadow DOM, in case that should have anything to do with it..</p>
  
  <p>Tried to load the font file from the contentscript as well, but still didn't work, I'm thinking it could have something to do with the resource not being under the "web_accessible_resources", but they are.. so I'm lost.</p>
  
  <pre><code>var fa = document.createElement('style');
      fa.type = 'text/css';
      fa.textContent = '@font-face { font-family: Font Awesome\ 5 Brands; font-style: normal; font-weight: 400; src: url('
          + chrome.extension.getURL('assets/webfonts/fa-brands-400.woff2')
          + ')}';
      shadow.appendChild(fa);
  </code></pre>