@font-face not generated with Webpack

[factormaarten]

Hi there,

I'm trying postcss-font-magician with Webpack 4. In my main.scss file I have:

body {
    font-family: 'Open Sans';
}

My postcss.config.js is:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-node-sass'),
    require('css-mqpacker'),
    require('cssnano')({
      preset: 'default'
    }),
    require('postcss-font-magician')({
      variants: {
        'Open Sans': {
            '300': [],
            '300 italic': [],
            '400': [],
            '400 italic': [],
            '600': [],
            '600 italic': [],
            '700': [],
            '700 italic': []
        }
      },
      foundries: ['google']
    })
  ]
}

And in my Webpack rules:

      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },

However in my css file no @font-face shows up.

What am I doing wrong?

[amir20]

Any update on this? It looks like cssnano removes the font-faces but I don't see a solution.

[rajdee]

Hi @amir20 @mpjraaij First you should use the cssnano after the postcss-font-magician

[georanma]

Hi @amir20 @mpjraaij First you should use the cssnano after the postcss-font-magician

This resolved my issue with my font faces not generating