Webpack Can Not Load Font File: Unexpected Token

Webpack can not load font file: Unexpected Token

The regex in your test expression has a small mistake. woff(2) means that it always looks for woff2 and just captures the 2 in a separate group. If you add a ? after it, webpack should be able to recognize woff as well:

test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'

Please let me know if this worked.

webpack gives me error @font-face { ^ unexpected token

you don't have any rule in your webpack config for .css files, only .scss files;
add a seprate css rule for CSS like that from libraries you use, or add .css beside .scss to let it handle both;

---

edit: actually your webpack-prod.js is deadly out-of-shape. multiple errors;

• the loader you use for fonts should be re-written
• remove unused imports on the top of file( non-js import will cause execption)
• you'd mixed plugins and loader in rule section
• honestly I was trying to fix but there were too many error one after another which is frustrating to work :(

Anyway, here is slightly more appropriate config to continue your debug journey ( no more @font-face error :)

const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')
const IconFontPlugin = require('icon-font-loader');

module.exports = {
  entry: "./src/js/index.js",
  mode: "production",
  output: {
    libraryTarget: "var",
    library: "Client"
  },
  module: {
    rules: [
      {
        test: "/.js$/",
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "node-sass"]
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },

      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },

      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[sha512:hash:base64:7].[ext]"
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({ filename: "[name].css" }),
    new WorkboxPlugin.GenerateSW(),
    new IconFontPlugin()
  ]
};

What's the correct way to load .otf font files in webpack?

I added

  {    
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    loader: "file-loader"
  }

to my webpack.config.js.
I think I needed to explicitly link the types to the file-loader. I was using the default VS2017 Angular project.

Unexpected token ILLEGAL when load fonts with .woff extention

You cannot load fonts using a <script> tag. That's only used for Javascript files.

Fonts must be loaded using a @font-face CSS rule, e.g:

@font-face {
    font-family: 'Gill Sans';
    src: url('/s/gillsans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

For more information, see MDN's article on @font-face.

Webpack failing at @font-face

Silly error. Removed the exclude from my css loader and got it working.

{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }

---

Related Topics