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.
Google Chrome extension relative path
If you're using CSS in your extension pages (background, popup, infobar, etc) then you can use relative paths with a slash (/
):
background-image:url("/sprites.png");
The above should work, everyone uses it. But, if your using it for content scripts and you can do the same for any css, you would need to use the predefined message like:
background-image:url('chrome-extension://__MSG_@@extension_id__/sprites.png');
If you want to programmatically set it, you can use the chrome.extension.getURL syntax as following:
var url = chrome.extension.getURL('sprites.png');
These are the ways that you can refer to a specific url/image.
In addition, as mentioned in this answer, if you place your image assets in a directory, these files are not accessible in the web page DOM automatically. The developer should specify the resources that can be loaded the page by using the "web_accessible_resources" setting in the manifest.json file:
Firefox extension custom fonts
If you look into the console messages, this is what you should see:
downloadable font: download not allowed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
Unfortunately for you, web fonts are subject to the same-origin policy which can only be relaxed via CORS. This means that there is no way to load the font file from an extension URL as there is no way to use CORS there.
This leaves you with two options:
- You host the font on a web server with proper CORS headers or use some existing font hosting.
- You encode the font as a data: URI. There is a number of data: URI generators available, e.g. this one.
IMHO the second solution is the preferable one as your extension won't be dependent on any web servers, especially not third-party web servers. Also, it won't introduce any delays caused by font downloading. I tried it and it worked fine:
@font-face {
font-family: 'FontAwesome';
src: url('data:application/octet-stream;base64,d09GRgAB...') format('woff');
font-weight: normal;
font-style: normal;
}
Side-note: You don't need the full backwards compatibility dance in a Firefox extension, it's sufficient to have the font in the WOFF format.
Related Topics
Debugging CSS in Google Chrome
Vertical Line with Dots in Ends and Between
Align Material Icon Vertically
Sass Syntax Highlighting in Visual Studio
Do I Still Have to Use All Five Vendor Prefixes for The CSS Box-Shadow Property
Font Size. What How to Be Sure Of
Media Query to Target Most of Smartphone
Error While Configuring CSS Modules with Webpack
Ionic Item with Left and Right Aligned Text
How to Style a Svg Using CSS in Javafx Fxml
Fixed Div Overlaps Scrollbar of Static Div
How to Revert Webkit-Appearance for Input[Type="Search"] of Normalize.CSS
How to Use Bootstrap 5 Custom Color Directly in The Class Attribute