Fontawesome + Chrome extension - fa-solid-900.woff2 not loading

Question

I'm sorting out a Chrome Extension that includes the use of FontAwesome icons.

I've found other posts about getting it working, replacing the @font-face parts for it.

This has worked with the fa-brands-400.woff2 and fa-regular-400.woff2 files (I think) but the console is throwing up about the fa-solid-900.woff2 still.

I have a gulp build process bundling fontawesome and the content css, along with a basic copy of the font files from node_modules...

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'));
});

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 @font-face entries in manually (manual until proven works, then automate), but the 900 is still giving me some jib.

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

Update:

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?

{
    "manifest_version": 3,
    "name": "Blah",
    "version": "0.0.1",
    "description": "...",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "content_scripts": [
        {
            "matches": [
                "https://*/*",
                "file:///*/test.html"
            ],
            "js": [
                "content.js"
            ],
            "css": [
                "content.css"
            ]
        }
    ],
    "permissions": [
        "alarms",
        "storage"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
    },
    "web_accessible_resources": [
        {
            "resources": [
                "resources/webfonts/*",
                "content.css"
            ],
            "matches": ["<all_urls>"]
        }
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'; font-src 'self' data:;"
    }
}

Make sure to reload the extension on chrome://extensions page and the web page tab too. — wOxxOm, Jun 28 '21 at 07:43
Yep, that's standard (I don't have any auto-reload/refresh mechanisms set up yet, so it's full manual button mashing right now). — Krenom, Jun 29 '21 at 05:21
i found same error and for me it was caused BY Fontawson icone library — Yasser CHENIK, Jan 01 '23 at 05:02

score 1 · Accepted Answer · answered Jul 03 '21 at 08:42

Sonfoa..

Ok, all my pain in life is caused by serving up a local file. The setup is all fine, it's just that it doesn't like serving resources for file:///... or anything of the sort. I was using a local test page (test.html).

Slap up the test page in local IIS so that it's being served like a normal web site, put in a URL match for http://localhost:*/* and it works just fine.

Fontawesome + Chrome extension - fa-solid-900.woff2 not loading

1 Answers1