Webpack changing font path?

Question

Fonts

I have been trying to solve the problem of connecting fonts in webpack for more than a day.

An error is thrown:

Failed to decode downloaded font: http://localhost:4300/fonts/Montserrat//montserrat_alternates_black..woff

And
OTS parsing error: invalid sfntVersion: 1702391919

I have no idea where this path comes from:

http://localhost:4300/fonts/Montserrat//montserrat_alternates_black..woff

Double after Montserrat /and at the end of the path 2 dots before the extension - ..woff

In fact, the font is located in the src/Montserrat/montserrat_alternates_black.woff
folder After assembly, the fonts are copied to the dist folder

project structure:
|-dist
| |-fonts
| |-montserrat_alternates_black.woff
|
|-src
|-fonts
| |-Montserrat
| |-montserrat_alternates_black.woff
|-css
|-fonts.sass
|-main.sass

Fonts are included in fonts.sass:

@font-face
    font-family: 'Montserrat'
    src: local('Montserrat'), 
    url("../fonts/Montserrat/montserrat_alternates_black.woff") format('woff'),
    url("../fonts/Montserrat/montserrat_alternates_black.ttf") format('truetype'),
    url("../fonts/Montserrat/montserrat_alternates_black.svg") format('svg')
    font-weight: normal
    font-style: normal

fonts.sass is included in main.sass:

@import "fonts.sass"

body
    font-family: 'Montserrat', sans-serif

Font assembly code

{
                test: /\.(ttf|otf|eot|woff|woff2|svg)$/,
                use: [
                    {
                       loader: 'url-loader',
                       options: {
                           limit: 10000,
                           name: `fonts/[name].[ext]`,
                           publicPath: 'http://localhost:4300/',
                        },
                    },
                ]
            },

I've been scratching my head for a day now and can't figure out what the problem is. Today I managed to load Montserrat for a while when I changed the loader from file-loader to url-loader, but then everything also suddenly broke down

help

Answer 1

Use aliases to connect various objects (pages, files, images, fonts, etc.), for example:

resolve: {
  alias: {
    aliasName: path.resolve(__dirname, "src/images"),
  }
}

// resolve: {
//     alias: {
//         alias_js_1: path.join(__dirname, 'src/js'),
//         "@alias_js_2": path.join(__dirname, 'src/styles'),
//         "alias_scss": path.join(__dirname, 'src/img'),
//         "alias_html": path.join(__dirname, 'src/img'),
//     }
// },

// JS1:
// import Index from "alias_js_1/index";

// JS2:
// import "@alias_js_2/_index.scss";

// CSS/SCSS:
// background: url("alias_scss/logo_1.png");
// background: url("~alias_scss/logo_1.png");
// @import: "alias_scss/file.scss";
// @import: "~alias_scss/file.scss";

// HTML:
// <img src='${require(`alias_html/catalog/product_1.png`)}'>
// ${require(`alias_html/header.html`)}