CODEWITHSUNDEEP
cssangularsvgwebpackwebpack-2
FreeRun
FreeRun

Reputation: 3

Can't load css-font (svg,eot,woff,woff2 and ttf) with webpack

I want to include this font in my project:

@font-face {
  font-family: 'bikeshop';
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833');
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833#iefix') format('embedded-opentype'),
       url('/src/styles/bikeFont/font/bikeshop.woff2?37006833') format('woff2'),
       url('/src/styles/bikeFont/font/bikeshop.woff?37006833') format('woff'),
       url('/src/styles/bikeFont/font/bikeshop.ttf?37006833') format('truetype'),
       url('/src/styles/bikeFont/font/bikeshop.svg?37006833#bikeshop') format('svg');
  font-weight: normal;
  font-style: normal;
}

compiling via "npm run server" works fine, but the fonticons aren't shown on the website

the console logs these errors:

GET "domain"/src/styles/bikeFont/font/bikeshop.woff2?37006833   
File: shared_styles_host.js:90   
GET "domain"/src/styles/bikeFont/font/bikeshop.woff?37006833  
File: src/styles/bikeFont/font/bikeshop.woff?37006833:1 
GET "domain"/src/styles/bikeFont/font/bikeshop.ttf?37006833  
File: src/styles/bikeFont/font/bikeshop.ttf?37006833:1

do i need to include a new loader for this in my webpack.common.js?

Edit:

i load the @font-face in my scss-file and use this webpack rule for it

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
},

Upvotes: 0

Views: 1573

Answers (2)

Tieme
Tieme

Reputation: 65419

Use simon04's answer if you want webpack to process your fonts and images in your css.

If you just want to use webpack for you css and ignore all url paths in your css (you will handle serving the referenced assets yourself) you could set the url option to false on the css-loader:

{
    test: /\.css$/,
    use: {
        loader: 'css-loader',
        options: { url: false }
    }
}

See https://github.com/webpack/css-loader#options-1

Upvotes: 0

simon04
simon04

Reputation: 3312

Use the css-loader together with file-loader or url-loader. For instance:

{
  module: {
    rules: [{
      test: /\.css$/,
      loader: 'css-loader'
    }, {
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }]
  }
}

Upvotes: 1

Related Questions