CODEWITHSUNDEEP
htmlgoogle-chromecssgoogle-chrome-extensionfont-face
Tomás Senart
Tomás Senart

Reputation: 1433

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

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

Upvotes: 26

Views: 17675

Answers (4)

serg
serg

Reputation: 111285

Here is how to get local path in css:

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

More about it here.

Upvotes: 48

Tyler Biscoe
Tyler Biscoe

Reputation: 2422

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.

Upvotes: -2

mattdlockyer
mattdlockyer

Reputation: 7314

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/*",
    ...
    ]

Upvotes: 26

matpie
matpie

Reputation: 17512

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.

Upvotes: -3

Related Questions