15

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?

Daisuke SHIBATO
  • 983
  • 2
  • 11
  • 23

7 Answers7

15

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".

OfirD
  • 9,442
  • 5
  • 47
  • 90
  • 2
    Thank you for a very useful and detailed post. wanted to add that based on my testing so far, the .css files are not required in the web_accessible_resources section of the manifest though. – gbro3n Nov 16 '20 at 16:25
  • 5
    In my case I tried to set up the fontAwesome for popup so I only downloaded all.min.css and all .woff2 files (atm of typing - fontawesome-5.15.2 - 3 files in webfonts folder) I put them into myFolder/css/all.min.css and myFolder/webfonts/ 3 .woff2 files Then in my popup I linked the location of all.min.css file: `` You don't need to put anything in manifest.json if you only want to use it in popup. Another explanation: [docs](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself#using-web-fonts) – GoodOldGuy Mar 12 '21 at 23:14
  • @GoodOldGuy, please put your comment as an answer. Both your answers cover all bases! – César Rodriguez Sep 15 '22 at 16:34
9

This is how I managed to get a local (offline) instance of fontawesome (4.7) in my chrome extension:

1) Download font files (FontAwesome.otf, fontawesome-webfont.eot, fontawesome-webfont.svg, fontawesome-webfont.ttf, fontawesome-webfont.woff, fontawesome-webfont.woff2) to fonts/

2) Download font-awesome.min.css to css/ and replace all urls in this file chrome-extension://__MSG_@@extension_id__/fonts/[...].

3) Update your manifest.json like this:

{
    ...
    "content_scripts":          [
        {
           ...
            "css":        [
                "css/font-awesome.min.css",
                ...
            ]
            ...
        }
    ],
    ...
    "web_accessible_resources": [
        ...
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2",
    ]
}

This makes fontawesome available offline (you don't need any fontawesome-js for this).

Thomas Kekeisen
  • 4,355
  • 4
  • 35
  • 54
  • I found the download link for the fa fonts here: https://devdreamz.com/question/248929-how-to-use-fontawesome-in-chrome-extension or directly: https://fontawesome.com/docs/web/setup/host-yourself/webfonts – Wim den Herder May 12 '22 at 21:14
3

If you need to use Font Awesome a Chrome Extension's content script (not the popup.html), you can do the following:

Download https://use.fontawesome.com/840a321d95.js, rename it to fontawesome.js and include it in your extension's directory as described in @wesdotcool's answer.

Then add the following to manifest.json:

{
    "manifest_version": 2,
    "content_scripts": [
        {
            "js": ["fontawesome.js"]
        }
    ],
}
stephenspann
  • 1,823
  • 1
  • 16
  • 31
  • This didn't work when extension was loaded on twitter.com. The error I am seeing in console `Refused to load the font 'https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff' because it violates the following Content Security Policy directive: "font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'".\` – void Oct 30 '17 at 07:06
3

None of the above worked for me. It may be because all the answers are outdated since they refer to older versions of Font Awesome. I solved it when I found what Font Awesome 6 suggests on their official website.

In short:

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

Note: Make sure to insert the correct path.

Some great tutorials to get the path of a file:

Jock
  • 388
  • 2
  • 12
2

The simplest, yet terrible, way is to download Fontawesome and include it directly

curl -o fontawesome.js "https://use.fontawesome.com/840a321d95.js"

and then add it where you need it

<script src="fontawesome.js"></script>
wesdotcool
  • 475
  • 4
  • 14
  • This also works in the chrome extension's `manifest.json` for content scripts. – stephenspann Oct 23 '17 at 20:45
  • This didn't work when extension was loaded on twitter.com. The error I am seeing in console `Refused to load the font 'https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff' because it violates the following Content Security Policy directive: "font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'".\` – void Oct 30 '17 at 07:06
  • I think is not working anymore, can somebody update? – Enrique Jan 08 '19 at 21:35
1

I successfully was able to use Font Awesome using Sass in my chrome extension.

Steps to integrate FontAwesome 5.11.x in your chrome extension using sass:

  1. Go to Font Awesome Download page to download a local copy of the web-specific files.
  2. Copy the SCSS folder into your styles folder.
  3. Copy the entire webfonts folder into assets folder.
  4. Open the font awesome scss/variables.scss and edit the $fa-font-path variable to point to where you placed the webfonts folder.

You'll need to use chrome-extension://__MSG_@@extension_id__/ to find the path of the extension folder.

For me the path to font files were - extension/chrome/assets/font-awesome, so I changed $fa-font-path to chrome-extension://__MSG_@@extension_id__/assets/font-awesome.

  1. Import Font Awesome by adding @import "scss/fontawesome.scss" in your main SCSS file. Also, import one or more styles @import "scss/solid.scss" in your main SCSS file. If you're using regular font, then import regular.scss.

Execute your web extension and you should be able to use font awesome icons.

terahertz
  • 2,915
  • 1
  • 21
  • 33
vikrantnegi
  • 2,252
  • 5
  • 24
  • 35
0

My use case is the following, I am adding icons to one page, not to the popup, to the page where I am generating divs, and buttons, and text, and stuff.

I finally did it by just appending a <script element containing the fontawesome.js to the page where my extension was adding the icons.

if(!document.getElementById("fontawesome_styling_script")){
        const script = document.createElement("script");
        script.id = "fontawesome_styling_script"
        script.src = "https://kit.fontawesome.com/name_of_file.js";
        script.crossOrigin = "anonymous";
        document.querySelector("head").appendChild(script);
    }

Get the .js file by creating a kit in the fontawesome webpage.

I tried everything before this and it just worked, I have only tested it with one page, so it might not work for other cases, but I'll leave it here in case it helps somebody else.

Jenesepados
  • 1
  • 1