Can't Adding font to my project #770

New Issue

fergalmoran · 2025-08-09T17:17:36Z

fergalmoran commented

2025-08-09 17:17:36 +00:00

Originally created by @AntiraLoachote on 5/11/2017

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 :)

*Originally created by @AntiraLoachote on 5/11/2017* 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 ![image](https://cloud.githubusercontent.com/assets/25278067/25946417/38ef0980-3675-11e7-91ad-95e0302ad180.png) 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 : ![image](https://cloud.githubusercontent.com/assets/25278067/25944343/27eee6e4-366d-11e7-942e-d7159048941c.png) **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 ![image](https://cloud.githubusercontent.com/assets/25278067/25945951/20cb6a12-3673-11e7-962c-0141afbf6766.png) **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 :)

fergalmoran closed this issue

2025-08-09 17:17:36 +00:00

fergalmoran referenced this issue

2025-08-09 17:18:06 +00:00

Getting Started with the Anuglar2Spa Template - Adding a Angular2 dependency #900

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#770