Adding @font-face stylesheet rules to chrome extension

Question

What is the recommended way to add a @font-face stylesheet rule through a chrome-extension? The problem is that the url of the font embed is located from within the extension, so I must do it in javascript in order to use chrome.extension.getURL.

I have tried document.styleSheets[0].addRule through a content-script, but that did not work. To clarify, I also have the font listed under web_accessible_resources.

Answer 1

You can also specify any additional stuff your extension uses in manifest.json in web_accesible_resources section. Docs are here.

Add this into your manifest.json file:

 "web_accessible_resources": [
    "fonts/*.*",
    "templates/*.html"
 ]

And also correct urls in your css:

@font-face {
  font-family: 'MyFont';
  src: url('chrome-extension://__MSG_@@extension_id__/fonts/font.eot') /* ... */;
}

Answer 2

Inject a <style> node, in your content-script. Something like so:

var styleNode           = document.createElement ("style");
styleNode.type          = "text/css";
styleNode.textContent   = "@font-face { font-family: YOUR_FONT; src: url('"
                        + chrome.extension.getURL ("YOUR_FONT.otf")
                        + "'); }"
                        ;
document.head.appendChild (styleNode);