0

I built font with webpack and want to use it, but it fails. My css is:

@font-face {
  font-family: 'DigitalDismay';
  src: url('../fonts/DigitalDismay.otf');
}

Generated url is http://localhost:3000/a3e85aa95ea26f41d5ba32abb0887b67.ttf. 404 error. But adding dist, it succeeds. http://localhost:3000/dist/a3e85aa95ea26f41d5ba32abb0887b67.ttf succeeds.

Do you know how to create url for pointing bult font files....

My directory structure: 

.
├── dist
│   ├── 582cac299faac1ab8d378a6488ba2ced.otf
│   ├── a3e85aa95ea26f41d5ba32abb0887b67.ttf
│   └── bundle.js
├── favicon
├── index.html
├── node_modules
├── ogimage.png
├── package.json
├── src
│   ├── actions
│   ├── assets
│   ├── components
│   ├── constants
│   ├── containers
│   ├── css
│   ├── fonts
│   ├── helpers
│   ├── models
│   └── reducers
└── webpack.config.js

My webpack.config.js:

module.exports = {
  entry: `${__dirname}/src/Index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015'],
        },
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000' },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
      },
      {
        test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
      },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
};
morizotter
  • 1,926
  • 2
  • 24
  • 34
  • The answer is in http://stackoverflow.com/a/28899482/1245142 . I just add `publicPath: '/dist/',` in webpack.config.js and the problem solved. – morizotter Apr 20 '16 at 17:28
  • a better question is "why are you webpack-bundling this font instead of letting the browser deal with caching etc"? As a static asset this is much better left to normal static hosting. – Mike 'Pomax' Kamermans Apr 20 '16 at 20:42

0 Answers0