Load Fonts with Webpack and Font-Face

Load fonts with Webpack and font-face

After trying a lot of stuff the next loader made the work. Instead of file-loader, I used url-loader . You need url-loader installed.

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

How to load fonts from LESS file with Webpack 5?

I was able to fix this issue by adding:

*{font-family:Gibson;}

to my bootstrap.less file.
I'm really uncertain this is the best way to do this, but it does work.

Webpack 5 font asset issue, no error but no font either

When you're defining a @font-face declaration, on the font-family property, you must only write a string indicating how you will reference the font in your later styles.

In other words, I erroneously included "sans-serif" after "Yusei Magic" on the font-family property. This didn't throw an error, but it's incorrect CSS and thus was the source of my error. Thanks for anyone who chimed in!

Can’t import font-face using webpack-4 file-loader

SOLVED!
The problem was in the CSS font path which is weird regarding file structure...

@font-face {
  font-family: "Gilroy-Bold";
  src: url("../fonts/gilroy-bold/Gilroy-Bold.woff2"),
       url("../fonts/gilroy-bold/Gilroy-Bold.woff");
}

I tried both url(./) and url(../../) but none of it works...

Using local web fonts with webpack

Got a working solution thanks to @omerts in this thread. Solution involved using publicPath. I had been trying to use it as an option in module.exports with the fonts file-loader, not the output.

Updated webpack.config.js:

const webpack = require('webpack');
const PROD = JSON.parse(process.env.PROD_ENV || '0');
const path = require('path');

const PATHS = {
  build: path.join(__dirname, './src/public')
};

module.exports = {

  entry: './src/app/App.jsx',

  output: {
    path: PATHS.build,
    filename: PROD ? 'bundle.min.js' : 'bundle.js',
    publicPath: PATHS.build
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        query: {
          presets: ['es2015', 'react', 'stage-1']
        }
      },
      {
        test: /\.s?css$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=/fonts/[name].[ext]'
      },
      {
        test: /\.(jpg|png)$/,
        loader: 'file-loader?name=/fonts/[name].[ext]'
      }
    ]
  },

  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      comments: false,
      compress: { 
        warnings: false,
        drop_console: true
      },
      mangle: {
        except: ['$'],
        screw_ie8: true,
        keep_fnames: false
      }
    })
  ] : []
};

---

Related Topics