Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''

Question

I encountered this error

ERROR in ./src/style/MyFont.ttf Module parse failed: /xxx/MyFont.ttf Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)` when I import my custom font in my less file like this:

@font-face {
    font-family: "MyFont";
    src: url("./MyFont.ttf") format("truetype"); 
}

my webpack config is as follow:

rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: babelQuery
  },{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.less$/i,
    use: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
  },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
]

Anyone knows how to solve it?

Seems that you don't include the webpack plugin for the `.ttf`. :) — Voro, Nov 15 '17 at 10:57

score 2 · Answer 1 · edited Jan 16 '18 at 15:55

2

Add this to your rules array.

{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

and you should install the file-loader using npm install. Hope this will help you.

edited Jan 16 '18 at 15:55

Thom

14,013
25
105
185

answered Nov 15 '17 at 10:59

Voro

235
1
12

yes, but seems you don't use any loaders. replace it my code. I think, that will work :) – Voro Nov 15 '17 at 12:16
that's url loader i am using... Tried your solution, it didnt work – Blake Nov 15 '17 at 12:20
what is your web pack version? – Voro Nov 15 '17 at 12:22

Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''

1 Answers1

Linked