css-loader parse fail on @font-face

[mattybow]

I get this error when webpack tries to run:

ERROR in ./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: 
./bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader?importLoaders=1!./bower_components/bootstrap/dist/css/bootstrap.css 2:4480-4532 2:4551-4603

Here's my configuration

 module: {
    loaders: [
      // Pass *.jsx files through jsx-loader transform
      { test: /\.js$/, loaders: ['react-hot','jsx?harmony'] },

      { test: /\.css$/, loader: "style-loader!css-loader?importLoaders=1" }
    ]
  }

Is it something in my config that's wrong or missing something?

[mattybow]

I needed to add url-loader to my config

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

[MayasHaddad]

@mattybow Thanks for solving it ;)

[Go7hic]

thx

[TonyWang031]

Thanks for the answer @mattybow, it seems better to add a suffix regex to fit more general cases, the following configuration works for me:
{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

[TheWaWaR]

Thanks @mattybow

[polinom]

:+1:

[wpcarro]

I am struggling to add new fonts to my styles. My webpack.config test for fonts is:

...
{
  test: /\.ttf$/,
  loaders: ['url?limit=100000']
},
...

I am unsure of the syntax that I should use to load the font file, and I think that this is the problem. Could anyone share with me a code snippet to illustrate how they have successfully loaded a font? Right now I have the following in my main.scss:

@font-face {
  font-family: testFont;
  src: url("../assets/fonts/Proxima_Nova_Regular.ttf");
  font-weight: bold;
}

But this isn't working for me. Any help would be greatly appreciated!

[cusspvz]

@wpcarro which css-loader version are you using ?

[wpcarro]

@cusspvz:

From the package.json

"css-loader": "^0.23.1",

We ended up getting the fonts to load using file-loader in lieu of url-loader. To be completely honest, I'm unsure of the nuances between the two loaders. I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

When I was experiencing trouble, Webpack was processing the font files before processing the Sass files. I rearranged this so that the order went:

json --> photos --> Sass --> audio --> fonts --> JS

Either way, the process was a little bit similar to shooting in the dark, but it's working now.

[cusspvz]

To be completely honest, I'm unsure of the nuances between the two loaders.

file-loader grabs the file and handle its writing on build (you could specify saved path/name.extension, and other nice features it has).
url-loader tries to load up file data inline by using blob style url loading, but it would do it only if a file size is under the limitspecified, otherwise it will fallback and use file-loader instead.

URL loader is indicated to be used on images and other small resources you could have.

I also ended up switching the order in which the loaders were applied, which I think ultimately did the trick.

Loaders order definition is important because they pipe the content over them.
Here are some examples so you can understand how it works under the hood:

**JS CONTENT ** < Loader D < Loader C < Loader B < Loader A < **File**

file-loader example

"public/path/to/image.thumbnail.png" (module exported string) < file-loader?name=[name].thumbnail.[ext] (saves file on folder and exports path) < gm-loader (handle resizing, exports thumbnailed file) < Original File (buffer with its content)

[wpcarro]

@cusspvz thanks for the detailed explanation and overview!

[zirho]

It'd better be

,
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url'
      }

to cover caching specific versions

[mqliutie]

Hi, I also have some questions when I import "amazeui/less/amazeui.less".

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:99961-100012

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100035-100078

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff2 in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100136-100189

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100220-100272

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.ttf in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100302-100353

ERROR in ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.svg in /Users/missl/webpack-lazyload-angular/node_modules/amazeui/less
 @ ./~/css-loader!./~/less-loader!./~/amazeui/less/amazeui.less 6:100387-100438

In addition, Please click here about amazeui

But when I import "amazeui/dist/css/amazeui.min.css" questions don't exist.

I think in less file use font so it have these questions.

Can you help me?

Thanks

[mqliutie]

I reviewed amazeui work tree , there is not fonts folder.

[oscaroceguera]

thanks @TonyWang031

before :

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

it worked! after apply:

{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

[psegarel]

You can find the full solution here
webpack-bootstrap

[eden-lane]

None of this works for me

[quantuminformation]

what if you are not wanting to bundle fonts at all? I originally had my pcss being parsed by postcss-cli and output to the same dir as webpacks build.

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

[MartianLee]

Lovely solution !! Thank you for your answer.
I wasted so much time but you solve it. I'm so happy now.

[mbeauchamp7]

None of the solutions worked for me until I changed the paths to absolute
Ex.:

@font-face {
  font-family: 'Quicksand-Bold';
  src: url('~/src/sass/fonts/quicksand/quicksand-bold/Quicksand-Bold.eot');
}

[cusspvz]

@mbeauchamp7 Have you tried this?

@font-face {
  font-family: 'Quicksand-Bold';
  src: url('~./fonts/quicksand/quicksand-bold/Quicksand-Bold.eot');
}

[mbeauchamp7]

@cusspvz This worked as well thanks!

[cusspvz]

@mbeauchamp7 It worked because the ~ acts as a module indicator for css-loader, meaning that it should load the file over webpack instead of css.

[mbeauchamp7]

@cusspvz Ah thanks for the clarification!

[qburst-hrishikesh]

@mattybow Hey I am using scss syntax and added an appropriate loader for it also. Here is my config
var webpack = require('webpack');
module.exports = {
context: __dirname + '/src',
entry: {
app: './app.js',
vendor: ['angular', 'angular-ui-router', 'angular-bootstrap-calendar', 'bootstrap-css-only']
},
output: {
path: __dirname + '/js',
filename: 'app.bundle.js'
},
module:{
loaders: [
{
test: /\.scss$/,
loader: "style!css!sass",
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
]
};
But I am getting the error

node_modules/bootstrap-css-only/css/bootstrap.min.css Unexpected token (5:83)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:83)

while building. Am I in short of any loaders here?

[mattybow]

@hrishikeshqb your error says that it does not know how to handle a .css file. You'll need to tell it how to handle a file with that extension in another loader entry with a test regex that matches ending in .css

[qburst-hrishikesh]

@mattybow Thanks man! it worked. Earlier I added css as <link rel="stylesheet" type="text/css" href='node_modules/bootstrap-only-css/dist/bootstrap.css'> in my index.html. But from now I guess webpack will take care of it.

[imrealashu]

Thanks @mattybow 👍

[kishan3]

Just remeber to install file-loader and url-loader before changing your webpack config.
Using :
npm install --save file-loader url-loader

[brandonreid]

For people from the future, I went with a different solution.
I used raw-loader:

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract([
        'raw-loader',
        'sass-loader',
      ])
    },
  ]
}

Then imported fonts where I wanted them with copy-webpack-plugin:

plugins: [
  new CopyWebpackPlugin([
    {
      // Copy Some Specific Fonts
      from: './node_modules/.../.../fonts',
      to: 'fonts'
    }
  ])
]

This gives me some extra control too so we avoid importing fonts unintentionally from other plugins, etc.

[trkrameshkumar]

Thanks! @mattybow , for sharing the solution :)

[zyxneo]

This code worked for me with webpack2:

      {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      }

I'm using https://icomoon.io/app/ , my css looks like:

@font-face {
  font-family: 'icomoon';
  src:
    url('fonts/icomoon.ttf?3jbvu') format('truetype'),
    url('fonts/icomoon.woff?3jbvu') format('woff'),
    url('fonts/icomoon.svg?3jbvu#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

Hope it helps.

[taha-k]

Slight improvement to @TonyWang031 suggestion as it gives invalid regex
{test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000'}

[rinogo]

@CodeTaha Good catch! Beyond adding support for more filetypes, it looks like you're escaping a . and a ?. Are there other changes I'm missing?

[ahmadalfy]

The solution proposed by @zyxneo is the best. Other solutions attempts to inline the SVG font into the CSS file which is insane.

[anzcarroll]

@oscaroceguera where did you put this? what location in what file? this is the exact issue I am having.

before :You may need an appropriate loader to handle this file type.SyntaxError: Unexpected character '�' (1:0)it worked!

after apply:{ test: /.(png\|woff(2)?\|eot\|ttf\|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

[ahmadalfy]

@anzcarroll When you get that error try stopping webpack and run it again

[rosethorn999]

I add the rule by zyxneo into webpack.config.js and redo
npm run dev
It's fixed! Thank!

[chebotarevmichael]

Кто пояснит, в какой именно файл это вписать? Какой именно конфиг??

[MargaretKrutikova]

In webpack.config.js in the section with rules. This is what works for me (slightly different from the proposed solution):

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      exclude: /node_modules/,
      use: {
        loader: 'url-loader?limit=1024&name=/fonts/[name].[ext]'
      }
    }
  ]
}

You also need to install url-loader and file-loader for webpack with this command (if using npm):

npm install --save-dev url-loader file-loader

[kshitijmehta]

Hi,

I am using Webpack + Vue2 project, I am having the same problem,
The fonts inside the SCSS are not getting resolved. Below is the config, Can anyone help me on this.

Webpack rules

{
test: /.vue$/, //Match the file extention
loader: 'vue-loader', //Loader type
options: vueLoaderConfig
},
{
test: /.(woff2?|woff|eot|ttf|otf|svg)(?.)?$/,
loader: 'url-loader', // *i tried file-loader also
options: {
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

The vueLoaderConfig looks like this
{
"loaders":{
"scss":[
{
"loader":"myapppath\node_modules\extract-text-webpack-plugin\dist\loader.js",
"options":{
"omit":1,
"remove":true
}
},
{
"loader":"vue-style-loader"
},
{
"loader":"css-loader",
"options":{
"sourceMap":true
}
},
{
"loader":"sass-loader",
"options":{
"sourceMap":true
}
}
],

},
"cssSourceMap":true,
"cacheBusting":true,
"transformToRequire":{
"video":[
"src",
"poster"
],
"source":"src",
"img":"src",
"image":"xlink:href"
}
}

main.js
import './assets/fonts/roboto/scss/roboto.scss'

roboto.scss
@font-face {
font-family: 'robotoblack';
src: url('/assets/fonts/roboto/roboto-black-webfont.eot');
src: url('/assets/fonts/roboto/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/roboto/roboto-black-webfont.woff2') format('woff2'),
url('/assets/fonts/roboto/roboto-black-webfont.woff') format('woff'),
url('/assets/fonts/roboto/roboto-black-webfont.ttf') format('truetype'),
url('/assets/fonts/roboto/roboto-black-webfont.svg#robotoblack') format('svg');
font-weight: normal;
font-style: normal;
}

I tried to make the scss loader look like [css-loader , resolve-url-loader , sass-loader]
But it didn't worked. The fonts are not getting created.

[iksent]

Try to install modules:

yarn add style-loader
yarn add css-loader
yarn add url-loader

Then in webpack.config.js add:

module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
    ],
},

And make import of CSS file (For example i have):
require ('react-notifications/dist/react-notifications.css');

[kenan0122]

ERROR in ../node_modules/iview/dist/styles/fonts/ionicons.ttf?v=3.0.0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ../node_modules/iview/dist/styles/iview.css 6:5023-5062
@ ./js/pages/flex.js
@ multi ./js/pages/flex.js

How to solve this problem?

[alphonse92]

{ test: /.(png|woff|woff2|eot|ttf|svg)(?v=[0-9].[0-9].[0-9])?$/, loader: 'url' } works for me. (Latest versions)

[glebfeklistov]

Try this
https://github.com/FeklistovGleb/self-mono-repo/blob/master/packages/site/webpack.config.js

[cleverboy32]

i cant fix the probelm.

in one css file name a.css
@font-face { font-family: 'som-ui-icons'; src: url('~./fonts/som-ui-icons.woff?t=1472440741') format('woff'), url('~./fonts/som-ui-icons.ttf?t=1472440741') format('truetype'); font-weight: normal; font-style: normal; }

i import the a.css in index.css
@import 'src/styles/a.css';
error:
Can't resolve './fonts/som-ui-icons.ttf?t=1472440741' in 'index.css'

it go to found font file in index.css path。。。。 hope who can help me.
my css-test-rule
{ test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }, { loader: 'postcss-loader' }, { loader: 'resolve-url-loader', options: { sourceMap: true } } ] }, { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader', options: { limit: 8192 } }

[nataliepan]

yarn add -D react-scripts worked for me

[hussainakram]

Just check the extension mentioned in the errored file. For my case it was missing woff2 so I just added it and all worked fine!

{
  test: /\.(jpe?g|png|gif|ico|woff|woff2)$/, // <=== match if you have required extension listed here or add it
  use: {
    loader: 'url-loader',
  },
};