Including custom fonts via webpack

[harrylincoln]

Has anyone been able to bundle custom fonts with this?

I'm struggling to get my custom fonts served up in the .tmp folder, and eventually the dist, also.

webpack.conf.js

 const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      }
    ],

    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|jpeg|jpg|svg)$/,
        loader: 'url-loader'
      },
      {
        test: /\.(css|scss)$/,
        loaders: [
          'style',
          'css',
          'sass?sourceMap',
          'postcss?sourceMap'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'video.js': 'video.js/dist/alt/video.novtt'
    }
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    })
  ],
  postcss: () => [autoprefixer],
  debug: true,
  devtool: 'source-map',
  output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js',
    publicPath: '/'
  },
  entry: `./${conf.path.src('index')}`
};

_typography.scss

@font-face {
  font-family: 'Betty-headings';
  src: url('./app/assets/fonts/MuseoSlab-500.eot?#iefix') format('embedded-opentype'),  url('./app/assets/fonts/MuseoSlab-500.otf')  format('opentype'),
       url('./app/assets/fonts/MuseoSlab-500.woff') format('woff'), url('./app/assets/fonts/MuseoSlab-500.ttf')  format('truetype'), url('./app/assets/fonts/MuseoSlab-500.svg#MuseoSlab-500') format('svg');
  font-weight: normal;
  font-style: normal;
}

Directory architecture:
package.json
conf/
^--webpack.conf.js
dist/
gulp_tasks/
gulpfile.js
src/
^--app/
^---assets/
^----fonts/
^-----MuseoSlab-500.eot

[rafaelescrich]

Hi there, I'm having the same problem and already tried a lot of things and nothing happens.

Did you resolved this issue by yourself?

[harrylincoln]

@rafaelescrich So I remember it was something like this:

1. you need to specify rules for webpack to understand how to treat specific files(font files in this case) and slam them into a folder ready to query when referencing them in the actual sass/css.

...
{
   test: /\.(eot|svg|ttf|woff|woff2)$/,
   loader: 'file-loader?name=/fonts/[name].[ext]'
},
...

2. Then in your sass try referencing said files served by webpack like this:
   require('./fonts/font-darkenstone/darkenstone.scss');
   Or something like this? maybe a .././fonts/ etc
   Webpack paths can be tedious but once you get them it kinda makes sense.

More reading here:
https://stackoverflow.com/questions/41335456/using-local-web-fonts-with-webpack

Hope that helps!

[rafaelescrich]

Thank you very much for your reply.