Can't Adding font to my project

[AntiraLoachote]

Problem! I try to adding font to my project ,this is my environment and step for adding font but i still can't use font and not found font file in asset while run webpack --config webpack.config.vendor.js

This is my environment
-use visual studio 2017
-use webpack v2.5.0
-use node v5.12.0
-use node-sass : "^4.5.0"
-use sass-loader : "^6.0.3"
-use angular2

soruce fonts file :

set loder in webpack.config.js

    module: {
           rules: [
            { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 
             'angular2-template-loader'] },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
               use: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: "file-loader" },
            { test: /\.css$/, use: ['to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader'] },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
            { test: /\.scss$/, include: /ClientApp/, use: ['raw-loader', 'sass-loader'] },
        ]
    },

and set loder in webpack.config.vendor.js

module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
    stats: { modules: false },
    resolve: { extensions: [ '.js' ] },
    module: {
        rules: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
        ]
    },
    entry: {
        vendor: [
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@angular/platform-server',
            'angular2-universal',
            'angular2-universal-polyfills',
            'bootstrap',
            'bootstrap/dist/css/bootstrap.css',
            'es6-shim',
            'es6-promise',
            'event-source-polyfill',
            'jquery',
            'zone.js'
        ]
    },
   

const clientBundleConfig = merge(sharedConfig, {
    output: { path: path.join(__dirname, 'wwwroot', 'dist') },
    module: {
        rules: [
        
            { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
        ]
    },
    plugins: [
        extractCSS,
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ].concat(isDevBuild ? [] : [
        new webpack.optimize.UglifyJsPlugin()
    ])
});

const serverBundleConfig = merge(sharedConfig, {
    target: 'node',
    resolve: { mainFields: ['main'] },
    output: {
        path: path.join(__dirname, 'ClientApp', 'dist'),
        libraryTarget: 'commonjs2',
    },
    module: {
        rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] } ]
    },
    entry: { vendor: ['aspnet-prerendering'] },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ]
});

...

and i'm using sass call @font-face

sourefile

SCSS
code in home.component.scss file
@font-face {
src: local('DBHelvethaicaMed65'), url('fonts/DBHelvethaicaXMedv65.woff') format('woff');
font-weight: normal;
font-style: normal;
/* ... other properties here ... */
}

h4 {
background-color: lightblue;
font-family: 'DBHelvethaicaMed65';
}

Help me please. Thank you so much :)

[SteveSandersonMS]

Looks like a limitation in css-loader, as per webpack-contrib/css-loader#2. It doesn't appear to support complex src values on @font-face - you have to use multiple src values (one for each URL).

[AntiraLoachote]

It doesn't work. @SteveSandersonMS

@font-face {
font-family: 'DBHelvethaicaMed65';
src: url('/dist/fonts/DBHelvethaicaXMedv65.woff') format('woff');
src: url('/dist/fonts/DBHelvethaicaXMedv65.ttf') format('truetype');
src: url('/dist/fonts/DBHelvethaicaXMedv65.svg') format('svg');
font-weight: normal;
font-style: normal;
}

[SteveSandersonMS]

Then sorry, I don't know for sure what the problem is (though I suspect the paths you're supplying - the ones starting with /dist/ - should be changed to relative paths). This is a webpack/css-loader question, so if you are struggling to debug it, could I suggest you raise it with the webbpack/css-loader community? Thanks!