CODEWITHSUNDEEP
webpackfontsmini-css-extract-plugin
Evgeniy
Evgeniy

Reputation: 1

Fonts via mini-css-extract-plugin

I'm not sure, but empirically found out that it seems minicssextractor breaks the paths to fonts written in css @foont-face

@font-face {
  font-family: 'Waiting-for-the-Sunrise';
  font-style: normal;
  font-weight: 400;
  src: url('waiting-for-the-sunrise-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('waiting-for-the-sunrise-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('waiting-for-the-sunrise-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('waiting-for-the-sunrise-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('waiting-for-the-sunrise-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('waiting-for-the-sunrise-v16-latin-regular.svg#WaitingfortheSunrise') format('svg'); /* Legacy iOS */
}

I came to such paths during the experiment, the fact is that the browser tried to search for fonts in this location. (read this in the console error)

http://localhost:9000/fontswaiting-for-the-sunrise-v16-latin-regular.47278f9491df1166dc0d.woff2

With a missing back slash after the fonts folder name

When I wrote the following path to save font files in assetModule

{
          test: /\.(woff2?|eot|ttf|otf|svg)$/i,
          include: [
            path.join(__dirname, 'src', 'fonts')
          ],
          generator: {
            filename: path.join('fonts[name].[hash][ext]')
          },
          type: 'asset/resource',
      }

Everything worked. But this is not as it should be. I'm guessing the paths break after mini-css-exctractor

P.s.

Or problem in css-loader, final css is


/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/fonts/fonts.css ***!
  \***********************************************************************/
/* waiting-for-the-sunrise-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Waiting-for-the-Sunrise';
  font-style: normal;
  font-weight: 400;
  src: url(fontswaiting-for-the-sunrise-v16-latin-regular.3ad9d32bdd08f024e2ce.eot); /* IE9 Compat Modes */
  src: url(fontswaiting-for-the-sunrise-v16-latin-regular.3ad9d32bdd08f024e2ce.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.47278f9491df1166dc0d.woff2) format('woff2'), /* Super Modern Browsers */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.7a974ce46409250b31e3.woff) format('woff'), /* Modern Browsers */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.8b5a4b6939495fe862ee.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.a7f1c3b3b712d68f152a.svg#WaitingfortheSunrise) format('svg'); /* Legacy iOS */
}

Upvotes: 0

Views: 234

Answers (2)

Evgeniy
Evgeniy

Reputation: 1

Instead of setting publicPath, what helped me in the end was changing path generation.

Finally, my output look that

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
  }

and my generator filename that

generator: {
            filename: 'fonts/[name].[ext]'
          }

(as example)

before it been that:

(not work)

generator: {
            filename: path.join('fonts/[name].[ext]')
          }

or

generator: {
            filename: path.join('fonts', '[name].[ext]')
          }

Upvotes: 0

Evgeniy
Evgeniy

Reputation: 1

If I understood correctly, it was necessary to install Public Pass. If I'm wrong - correct me.


output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.[contenthash].js',
+   publicPath: 'http://localhost:9000/'
  },

Upvotes: 0

Related Questions