How to use fontawesome in Chrome Extension?

Question

I am developing a Google Chrome Extension that is displayed on a specific website. And I want to use Fontawesome in my chrome extension. When I try to load fonts, the error GET chrome-extension://invalid/ net::ERR_FAILED occured.

In the stylesheet, webfonts are included with @font-face like this.

src: url('chrome-extension://__MSG_@@extension_id__/Fonts/fontawesome-webfont.eot?v=4.7.0');

I also tried to embed my extension id directly, though it doesn't work.

My manifest.json:

"web_accessible_resources": ["Fonts/*.*", "*.ttf", "*.eot", "*.svg", "*.woff", "*.woff2"],

How to solve this?

Answer 1

I'd like to add upon @Thomas Kekeisen answer with an updated answer for version 5 (current version is 5.13.0) of FontAwesome.
Also, I'd like to keep things as minimal as possible, and so:

1. I will only refer to woff2, since there's no reason to use another format.
2. I will only refer to FontAwesome's regular style (this is one of their 5 styles).

Therefore, if you're using a format other than woff2, or a style other than regular, just apply the following to it in the same way.

---

So, in order to use FontAwesome in Chrome extensions, do as follows:

1. Download FontAwesome .zip file (that's a direct download link, you can visit the download page here).

2. Extract the .zip, and only take what's needed, which in our example are:

   (a) css/fontawesome.min.css
   (b) css/regular.min.css
   (c) webfonts/fa-regular-400.woff2

   Note: If you're using css/all.min.js, it replaces both (a) and (b).

3. Optional, and would make our life easier:

   Under your Chrome extension root folder, create the folders css and webfonts to mimic FontAwesome structure, and move the files listed above into these folders.
   Your folder structure should look as follows:

   your-extension
    |- css
      |- fontawesome.min.css
      |- regular.min.css
    |- webfonts
      |- fa-regular-400.woff2
   

4. Inside css/regular.min.css, override (yes, just override it) @font-face media style with the following:

   @font-face {
     font-family: "Font Awesome 5 Free";
     font-style: normal;
     font-weight: 400;
     font-display:block;
     src: url("chrome-extension://__MSG_@@extension_id__/webfonts/fa-regular-400.woff2");
   }
   

   Note: Let me remind again that I refer to the regular style as an example, so if you're using another style, make sure the @font-face.src property has the correct value.

5. Update your manifest.json as follows:

   {
     ...
     "content_scripts": [{
        ...
        "css": [
           "css/fontawesome.min.css",
           "css/regular.min.css",
        ]
        ...
     }],
     ...
     "web_accessible_resources": [
        ...
       "css/fontawesome.min.css",
       "css/regular.min.css",
       "webfonts/fa-regular-400.woff2", // or: "webfonts/*" 
     ]
   }
   

   Note: it's needed to add the .css paths into both "content_scripts" and "web_accessible_resources".