How to use @font-face on a Chrome Extension in a Content Script

Question

Since I can't use chrome.extension.getURL() on a CSS file, how can I use @font-face with a local font file?

score 46 · Accepted Answer · edited Dec 30 '15 at 19:36

46

Here is how to get local path in css:

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

More about it here.

edited Dec 30 '15 at 19:36

Chris Hunt

3,840
3
30
46

answered Dec 27 '10 at 00:43

serg

109,619
77
317
330

There is a bug on some Chrome versions which prevents this from working. The quick fix: Use your extension id hardcoded instead of "__MSG_@@extension_id__". The bummer is that when testing locally it won't work. – Tomás Senart Feb 28 '11 at 22:20
13

Don't forget to add fonts to https://developer.chrome.com/dev/extensions/manifest.html#web_accessible_resources !! – Aleksandr Motsjonov May 31 '13 at 18:01

score 24 · Answer 2 · edited May 23 '17 at 12:02

This solution finally worked for me:

It injects a style node into the document of the content script.

And for Font Awesome, you only need the .woff src for Chrome.

Adding @font-face stylesheet rules to chrome extension

My code:

var fa = document.createElement('style');
    fa.type = 'text/css';
    fa.textContent = '@font-face { font-family: FontAwesome; src: url("'
        + chrome.extension.getURL('lib/fa/fonts/fontawesome-webfont.woff?v=4.0.3')
        + '"); }';
document.head.appendChild(fa);

In your manifest:

"css":[
    "lib/fa/css/font-awesome.min.css",
    ...
    ]

"web_accessible_resources":[
    "lib/fa/fonts/*",
    ...
    ]

Note: `"css": [...]` goes inside `"content_scripts": [...]` – IvanRF Mar 18 '16 at 01:42 — IvanRF, Mar 18 '16 at 01:42

score -2 · Answer 3 · edited May 23 '17 at 11:54

-2

Old question, but this I think is the best solution:

Firefox extension custom fonts

It applies equally for chrome extensions because rather than pointing to a font file, you're including the base64 encoded version of the font right in the CSS.

edited May 23 '17 at 11:54

Community

1
1

answered Aug 06 '14 at 21:59

Tyler Biscoe

2,322
3
20
33

matpie · Answer 4 · 2013-08-13T17:54:42.207

-3

Just use a relative URL. It's simpler, cleaner, and is The Right Thing To Do™:

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
}

I know this question is old but it's a top result on Google and the accepted answer is inefficient.

EDIT: It seems that others are getting mixed results for this. I should mention that it probably doesn't work when used in Content Scripts. I've tested this in Popup Scripts and it works fine.

edited Aug 13 '13 at 17:54

answered Oct 24 '12 at 22:39

matpie

17,033
9
61
82

@Layke The path is relative to the CSS file location. I've simplified the example so you will probably still need to specify a `format()`. – matpie Oct 26 '12 at 22:14
1

This one doesn't work. It tries to find resource on Actual Web Page content script running at. – Aleksandr Motsjonov May 31 '13 at 18:01
5

This is not intended for content scripts, it will only work in popup browser actions. – matpie Aug 13 '13 at 17:56
Question is specifically about content scripts, where this does not work. – Davi May 09 '15 at 23:06
It seems the question's title was edited long after I made this answer. – matpie May 15 '15 at 17:08
If the user wasn't using a content script the problem as described wouldn't be a problem. So I would say that this answer is somewhat distracting. – pixelearth Sep 20 '17 at 01:10
Has anyone managed to get font-awesome working with content-scripts? – Jonah Dec 27 '17 at 03:59

How to use @font-face on a Chrome Extension in a Content Script

4 Answers4

Linked