How to use a font in Chrome Extension?

Question

I am developing a Google Chrome extension that appears on a specific website. And I want to use Fontawesome in my chrome extension. When I try to download fonts, an error has occurred GET chrome-extension://invalid/ net::ERR_FAILED.

In the stylesheet, webfonts are included with the @font-facefollowing.

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

I also tried to embed my internal identifier directly, although it does not work.

My manifest. json:

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

How to solve this?

Answer 1

The easiest but terrible way is to download Fontawesome and enable it directly

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

and then add it to where you need it

<script src="fontawesome.js"></script> 

Answer 2

Font Awesome Chrome script ( popup.html), :

https://use.fontawesome.com/840a321d95.js, fontawesome.js , @wesdotcool.

manifest.json:

{
    "manifest_version": 2,
    "content_scripts": [
        {
            "js": ["fontawesome.js"]
        }
    ],
}