webpack HtmlWebpackPlugin add font

68 Views Asked by At

Hello I'm new using webpack and i'm having a problem adding a font

in the webpack.config.js I have the html template like this:

plugins: [
    new ESLintPlugin(),
    new HtmlWebpackPlugin({
        template: '/var/lib/cornerstone3D/utils/PROYECTO/template.html',
    }),
    new webpack.DefinePlugin({
         __BASE_PATH__: "''",
    }),
    new CopyPlugin({
        patterns: [
            {
                from: '../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import',
                to: '/var/lib/cornerstone3D/utils/PROYECTO/dist',
            },
        ],
    }),
    // new BundleAnalyzerPlugin()
],

entry: path.join('/var/lib/cornerstone3D/packages/tools/proyecto', './editor/index.ts'),
output: {
    path: '/var/lib/cornerstone3D/utils/PROYECTO/dist',
    filename: 'editor.js',
},

then in the rules I have the file loader for the font files.

{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: ''
            }
        }
    ]
},

I import the fonts in the javascript and then in the html

<link type="css" rel="stylesheet" 
 href="./packages/tools/proyecto/editor/fonts/Montserrat/stylesheet.css">

I also tried

<link type="css" rel="stylesheet" href="./fonts/Montserrat/stylesheet.css">

but it cannot find the stylesheet.css. I put the fonts in the root folder of the project, in the folder of the typescript and also in the folder of the html template, but it won't change the font.

In the stylesheet.css I have:

@font-face {
    font-family: 'montserratbold';

    src: url('montserrat-bold-webfont.eot');
    src: url('montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('montserrat-bold-webfont.woff2') format('woff2'),
         url('montserrat-bold-webfont.woff') format('woff'),
         url('montserrat-bold-webfont.ttf') format('truetype'),
         url('montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Could anybody help me please?

0

There are 0 best solutions below