How to use @font-face on a Chrome Extension in a Content Script
Here is how to get local path in css:
body { background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');}More about it here.
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/*", ... ]
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.