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?