Font is not loaded?

[BonBonSlick]

@font-face {
  font-family: 'Roboto';
  //src: url('./../font/roboto/Roboto-Light.ttf') format('ttf'); // error
  src: url('./fonts/roboto/Roboto-Light.ttf'); // error
}
body {
  font-family: 'Roboto', sans-serif; // not applied
  font-size: 5em; // applied
}

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

Vue.js project structure

...
dist
public
src->assets->font->roboto->Roboto-Light.ttf // duplicated for test
src->assets->scss->Roboto-Light.ttf // duplicated for test
src->assets->scss->main.scss // where @font-face
static
...

Error

Module not found: Error: Can't resolve './fonts/roboto/Roboto-Light.ttf' in ... All of these ways are not working, font is not loaded, module is missing, invalid settings.

//@import '../font/roboto/Roboto-Light.ttf';

//$font_path: '~@/assets/font/';
//$font_path: '~@/assets/font/roboto/';
//$font_path: 'assets/font/roboto/';
//$font_path: '../fonts';
//$font_path: '~@/assets/fonts/';

@font-face {
//@import '../font/roboto/Roboto-Light.ttf';
//@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400");
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

  font-family: 'Roboto';
  //src: url('./fonts/roboto/Roboto-Light.ttf') format('truetype');
  //src: url('fonts/roboto/Roboto-Light.ttf') format('truetype');
  //src: url('fonts/roboto/Roboto-Light.ttf') format('ttf');
  //src: url('/assets/font/roboto/Roboto-Light.ttf') format('ttf');
  //src: url('./roboto/Roboto-Light.ttf');
  //src: url('./fonts/roboto/Roboto-Light.ttf');
  //src: url('/fonts/roboto/Roboto-Light.ttf');
  //src: url($font_path + 'roboto/Roboto-Light.ttf');
  //src: url("../font/roboto/Roboto-Light.ttf") format("truetype");
  //src: url("./../font/roboto/Roboto-Light.ttf") format("truetype");
  //src: url("Roboto-Light.ttf") format("truetype");
  src: url("./Roboto-Light.ttf") format("truetype");
  //src: url("~@/assets/font/roboto/Roboto-Light.ttf") format("truetype");
//  src:  url($font_path + 'Roboto-regular.woff2') format('woff2'),
//url($font_path +'Roboto-regular.woff') format('woff'),
//url($font_path +'Roboto-regular.ttf') format('truetype');

  font-style: normal;
  font-weight: normal;
}

   // {
            //     test: /\.(otf|eot|woff|woff2|ttf|svg)$/,
            //     loader: 'file-loader',
            //     options: {
            //         name: '[name].[ext]',
            //         outputPath: 'fonts/',
            //     },
            // },
            {
                test: /\.(otf|eot|woff|woff2|ttf|svg)$/,
                // test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // name: 'fonts/[name].[ext]',
                            name: '[name].[ext]',
                            outputPath: './fonts/',
                            publicPath: './.',
                            // publicPath: function(url) {
                            //     return url.replace(/fonts/, '..');
                            // },
                            // name: 'fonts/[name].[ext]',
                            // outputPath: 'fonts/',
                        },
                    },
                ],
            },

full config

'use strict';
imports ...
module.exports = {
    mode: 'development',
    entry: [
        './src/app.js',
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader',
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                    },
                },
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'style-loader',
                    'css-loader',
                ],
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]',
                },
            },
            {
                test: /\.(otf|eot|woff|woff2|ttf|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/',
                        },
                    },
                ],
            },

        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new FriendlyErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index_dev.html',
            inject: true,
        }),
    ],
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            config: path.resolve(__dirname, '../config'),
            vue: 'vue/dist/vue.js',
        },
    },
};
module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
        'process.env': {

        },
    }),
]);

Tried different paths. Font size applied, font face does not, why?

[alexander-akait]

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I'm closing this. Please either update the issue with the template and reopen, or open a new issue.

You should provide minimum reproducible test repo, you configuration is unreadable