Open
Description
My extension runs on a page with strict CSP policies (duckduckgo.com) which prevent fonts being loaded from moz-extension scheme's as described more in detail here: https://stackoverflow.com/questions/24357596/firefox-extension-custom-fonts
I've tried a number of different approaches with trying to add a loader to the webpack config via the extension.config.js file but none have worked. Some have just done nothing and others throw an error.
Is there any way to get the fonts to inline as base64?
My style.css:
@font-face {
font-family: 'Roboto';
src: url('/public/fonts/Roboto-Regular.ttf');
font-weight: 400;
font-style: normal;
}
Different versions of extension.config.js I've tried (making sure to install other 3rd party loaders where needed):
module.exports = {
config: (config) => {
config.module.rules.push({
test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: ["base64-inline-loader"],
});
return config;
},
};
module.exports = {
config: (config) => {
config.module.fonts.push({
test: /\.css$/,
use: ["base64-inline-loader"],
});
return config;
},
};
module.exports = {
config: (config) => {
config.module.rules = [
...config.module.rules,
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(woff|woff2|eot|ttf)$/,
use: ["url-loader?limit=100000"],
},
];
return config;
},
};
module.exports = {
config: (config) => {
config.module.rules.push({
test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: ["url-loader"],
type: "asset/resource",
});
return config;
},
};
Metadata
Metadata
Assignees
Labels
No labels