Force Webpack to use file-loader instead of url-loader for fonts, images and media rules. The motivation behind this plugin is because when using typeface-* modules to embed fonts in an app, some font styles are embedded in CSS as base64 strings even if they are not being used.


$ npm install gatsby-plugin-force-file-loader


By default, all rules are enabled. To conform with the best practices, it’s recommended that you set only the rules that you need, keeping the default behavior in other rules.

Note: for better compatibility, use this plugin before any other plugin.

// gatsby-config.js

module.exports = {
  plugins: [
      resolve: `gatsby-plugin-force-file-loader`,
      options: {
        rules: [
          'fonts', /* Matches Gatsby default rules for fonts */
          'images', /* Matches Gatsby default rules for images */
          'media', /* Matches Gatsby default rules for media (video/audio) */
    /* ... */


The MIT License