Unexpected character '@' when importing fonts

[ashah888]

When I import a custom font using the following code inside a .css file, it creates an error saying "Unexpected character '@'".

How can I import a custom font in my project?

@font-face {
  ...
}

[gaearon]

Please post the whole file. I can’t reproduce this.

[gaearon]

I’m closing because there are not enough instructions to reproduce.
If you post a complete failing file, I will happily take a look.

[danielsarin]

I came across this issue as well. For example if I have a local font file like this

/* source-sans-pro-300 - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('/vendor/fonts/source-sans-pro/source-sans-pro-v9-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('/vendor/fonts/source-sans-pro/source-sans-pro-v9-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/vendor/fonts/source-sans-pro/source-sans-pro-v9-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/vendor/fonts/source-sans-pro/source-sans-pro-v9-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
       url('/vendor/fonts/source-sans-pro/source-sans-pro-v9-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/vendor/fonts/source-sans-pro/source-sans-pro-v9-latin-ext_latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

and then I try to import it in index.js with something like this

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './../../vendor/fonts/source-sans-pro/source-sans-pro.css';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

it gives me an error

Error in ../vendor/fonts/source-sans-pro/source-sans-pro.css
Module parse failed: /Users/daniel/web/test/public/vendor/fonts/source-sans-pro/source-sans-pro.css Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (2:0)
 @ ./src/index.js 17:0-67

I guess I could include the font separately in index.html, so in my case it's not a big issue.

[gaearon]

I don’t think this would work:

import './../../vendor/fonts/source-sans-pro/source-sans-pro.css';

The instructions in generated README say:

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack.
You need to put any JS and CSS files inside src, or Webpack won’t see them.

Your CSS file is not inside src so Webpack doesn’t recognize it.
I’ll reopen because we’ll likely want to relax this rule because many people get confused by this.

[danielsarin]

Ah, you're right. Forgot about that, it does work inside src.

[jahooma]

I had this problem too. It's not at all intuitive for images and fonts to be located within src.

[gaearon]

This was fixed in #504.