CODEWITHSUNDEEP
webpack
Milad
Milad

Reputation: 1

WebPack doesn't serve fonts

I have this CSS:

@font-face{
    font-family:IranSans;
    font-style:normal;
    font-weight:bold;
    src:url("/assets/fonts/IranSansWebBold.eot");
    src:url("/assets/fonts/IranSansWebBold.eot?#iefix") format("embedded-opentype"),url("/assets/fonts/IranSansWebBold.woff2") format("woff2"),url("/assets/fonts/IranSansWebBold.woff") format("woff"),url("/assets/fonts/IranSansWebBold.ttf") format("truetype");
}

And I have fonts in the assets folder and inside fonts folder. Names are correct.

However Webpack can't serve them and returns 404. I can't find why it's so. What do I miss here?

Upvotes: 0

Views: 578

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9338

Install a file-loader using npm i file-loader -D

  {
    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'fonts/',
          name: '[name][hash].[ext]',
        },
      },
    ],
  },

Then in your css file

@font-face {
    font-family: 'GothamPro';
    src: url('./fonts/GothamPro.eot?') format('eot'), 
         url('./fonts/GothamPro.otf')  format('opentype'),
         url('./fonts/GothamPro.woff') format('woff'), 
         url('./fonts/GothamPro.ttf')  format('truetype'),
         url('./fonts/GothamPro.svg#GothamPro') format('svg');
}

The file loader will output all ur font files in your build/fonts/ directory

U can also use url-loader if u want to inline the font files in your JavaScript bundle

Upvotes: 2

Related Questions