Loading fonts with webpack

Question

I'm trying to use custom fonts in a Project website with angular4.

This is my Project structure

This is my webpack.config.js

const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                // Font Definitions
                { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
                { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
                { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
                { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
                { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

This is my css with @font-face

@font-face {
    font-family: "FuturaMaxiLight";
    src: url('/fonts/FuturaMaxi/Futura-Maxi-Light.eot') format('embedded-opentype'), /*for IE */
    url('/fonts/FuturaMaxi/Futura-Maxi-Light.ttf') format('truetype'), /* for CSS3 browsers */
    url('/fonts/FuturaMaxi/Futura-Maxi-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FuturaMaxiDemi";
    src: url('/fonts/FuturaMaxi/Futura-Maxi-Demi.eot') format('embedded-opentype'), /*for IE */
    url('/fonts/FuturaMaxi/Futura-Maxi-Demi.ttf') format('truetype'), /* for CSS3 browsers */
    url('/fonts/FuturaMaxi/Futura-Maxi-Demi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FuturaMaxiBold";
    src: url('/fonts/FuturaMaxi/Futura-Maxi-Bold.eot') format('embedded-opentype'), /*for IE */
    url('/fonts/FuturaMaxi/Futura-Maxi-Bold.ttf') format('truetype'), /* for CSS3 browsers */
    url('/fonts/FuturaMaxi/Futura-Maxi-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

This is the error when I try like that

If I change the css and try to include a dot before the import. 1 dot gives errors. 2 dots breaks the app.

@font-face {
    font-family: "FuturaMaxiBold";
    src: url('./fonts/FuturaMaxi/Futura-Maxi-Bold.eot') format('embedded-opentype'), /*for IE */
    url('./fonts/FuturaMaxi/Futura-Maxi-Bold.ttf') format('truetype'), /* for CSS3 browsers */
    url('./fonts/FuturaMaxi/Futura-Maxi-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Answer 1

You need resolve-url-loader to resolve the correct path in your build.

See https://github.com/bholloway/resolve-url-loader

Install resolve-url-loader

npm install --save-dev resolve-url-loader

Modify your Webpack CSS rule:

{
  test: /\.css$/,
  use: [
    'to-string-loader', 
    isDevBuild ? 'css-loader' : 'css-loader?minimize',
    'resolve-url-loader'      // Add this
  ]
}

Use relative paths in your CSS files

@font-face {
    font-family: "FuturaMaxiLight";
    src: url('../fonts/FuturaMaxi/Futura-Maxi-Light.eot') format('embedded-opentype'), /*for IE */
    url('../fonts/FuturaMaxi/Futura-Maxi-Light.ttf') format('truetype'), /* for CSS3 browsers */
    url('../fonts/FuturaMaxi/Futura-Maxi-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Answer 2

Your loaders are specifying name=font/[name].[ext] and your css is looking at /fonts/FuturaMaxi/[name].[ext].

Try changing the loaders to use name=[path][name].[ext] or name=fonts/FuturaMaxi/[name].[ext]