CODEWITHSUNDEEP
cssgoogle-chrome-extensionfonts
User_FTW
User_FTW

Reputation: 524

Fonts not working in chrome extension

I'm 99.9% certain I have this right, but for some reason it isn't working.

I'm making a chrome extension that injects CSS onto a page, and my CSS has been working fine right up until I wanted to change the fonts.

So my manifest has this...

"css": ["css/my-custom.css"],
"js": [ "js/jquery.js", "js/my-custom.js", "js/jquery.cookie.js"],
"web_accessible_resources": ["css/my-custom.css", "fonts/Roboto-Regular.ttf", "images/*.*"]

...and my CSS has this...

@font-face {
    font-family: 'RobotoLtRegular';
    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    background: #f1f1f1 !important;
    font-size: 1.2em !important;
    font-family: RobotoLtRegular !important;
}

p {
    font-family: RobotoLtRegular !important;
}

...and yet when I reload my extension I don't see the new font. The chrome element inspector also shows that this font should be the one shown on body and p (there are no other fonts overriding RobotoLtRegular.

FYI my fonts are stored in the css directory of the extension, so the path is correct.

I'm at a complete loss.

Any suggestions would be helpful.

UPDATE: If it helps to know, I am loading it as an unpacked extension.

Upvotes: 9

Views: 4667

Answers (1)

User_FTW
User_FTW

Reputation: 524

The solution was to add web_accessible_resources into the manifest (works for manifest version 2):

"web_accessible_resources": ["*.ttf" ]

To include any other file types you can comma separate them as such:

"web_accessible_resources": [ "*.png", "*.ttf" ]

Works perfectly.

Upvotes: 2

Related Questions