title: Fontawesome + Chrome extension - fa-solid-900.woff2 not loading
body: <p>I'm sorting out a Chrome Extension that includes the use of FontAwesome icons.</p>
  <p>I've found <a href="https://stackoverflow.com/questions/41237548/how-to-use-fontawesome-in-chrome-extension">other posts</a> about getting it working, replacing the <code>@font-face</code> parts for it.</p>
  <p>This has worked with the <code>fa-brands-400.woff2</code> and <code>fa-regular-400.woff2</code> files (I think) but the console is throwing up about the <code>fa-solid-900.woff2</code> still.</p>
  <p><a href="https://i.stack.imgur.com/4IgW4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4IgW4.png" alt="Console output" /></a></p>
  <p>I have a gulp build process bundling fontawesome and the content css, along with a basic copy of the font files from node_modules...</p>
  <pre><code>gulp.task('content-css', function () {    
      return gulp.src([
              'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
              'src/content.css'
          ])
          .pipe(concat('content.css'))
          .pipe(cleanCss())
          .pipe(gulp.dest('build'));
  });
  
  gulp.task('fonts', function () {    
      return gulp.src([
              'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2',
              'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2',
              'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2'
          ])
          .pipe(gulp.dest('build/resources/webfonts'));
  });
  </code></pre>
  <p>It's all in place and looking good - and the 400 woff's no longer throw up in the console once I put the new <code>@font-face</code> entries in manually (manual until proven works, then automate), but the 900 is still giving me some jib.</p>
  <pre><code>@font-face {
      font-family: 'Font Awesome 5 Free';
      font-style: normal;
      font-weight: 900;
      font-display: block;
      src: url(&quot;chrome-extension://__MSG_@@extension_id__/resources/webfonts/fa-solid-900.woff2&quot;) format(&quot;woff2&quot;); }
  @font-face {
     font-family: 'Font Awesome 5 Brands';
     font-style: normal;
     font-weight: 400;
     font-display: block;
     src: url(&quot;chrome-extension://__MSG_@@extension_id__/resources/webfonts/fa-brands-400.woff2&quot;) format(&quot;woff2&quot;); }
  @font-face {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 400;
     font-display: block;
     src: url(&quot;chrome-extension://__MSG_@@extension_id__/resources/webfonts/fa-regular-400.woff2&quot;) format(&quot;woff2&quot;); }
  </code></pre>
  <p>Update:</p>
  <p>The icons are working fine in the popup, it's the content shizzle that's having an issue. I assume something not quite right about the manifest?</p>
  <pre><code>{
      &quot;manifest_version&quot;: 3,
      &quot;name&quot;: &quot;Blah&quot;,
      &quot;version&quot;: &quot;0.0.1&quot;,
      &quot;description&quot;: &quot;...&quot;,
      &quot;icons&quot;: {
          &quot;16&quot;: &quot;images/icon16.png&quot;,
          &quot;48&quot;: &quot;images/icon48.png&quot;,
          &quot;128&quot;: &quot;images/icon128.png&quot;
      },
      &quot;content_scripts&quot;: [
          {
              &quot;matches&quot;: [
                  &quot;https://*/*&quot;,
                  &quot;file:///*/test.html&quot;
              ],
              &quot;js&quot;: [
                  &quot;content.js&quot;
              ],
              &quot;css&quot;: [
                  &quot;content.css&quot;
              ]
          }
      ],
      &quot;permissions&quot;: [
          &quot;alarms&quot;,
          &quot;storage&quot;
      ],
      &quot;background&quot;: {
          &quot;service_worker&quot;: &quot;background.js&quot;
      },
      &quot;action&quot;: {
      },
      &quot;web_accessible_resources&quot;: [
          {
              &quot;resources&quot;: [
                  &quot;resources/webfonts/*&quot;,
                  &quot;content.css&quot;
              ],
              &quot;matches&quot;: [&quot;&lt;all_urls&gt;&quot;]
          }
      ],
      &quot;content_security_policy&quot;: {
          &quot;extension_pages&quot;: &quot;script-src 'self'; object-src 'self'; font-src 'self' data:;&quot;
      }
  }
  </code></pre>