Skip to content

Unable to inline fonts in css #264

Open
@dshook

Description

@dshook

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions