Laravel-mix: How to use own font files (.woff2, .woff) with Laravel webpack?

[Tklaversma]

Hi,

I've my own font files in .woff2 and .woff format. Those fonts are stored in resources/assets/fonts/. I can place them in `public/fonts/' if thats better...but for now this is not the problem.

The problem is that I don't know how to tell Webpack where to find font files?

My app.scss file:

...
@font-face {
    font-family : 'MyFontName';
    src         : url('./fonts/myfontname.woff2') format('woff2'),
                  url('./fonts/myfontname.woff') format('woff');
    font-weight : normal;
    font-style  : normal;
}
...

I know using ./fonts/... is wrong, because this will look for a fonts folder in node_modules. But how do I point Webpack to look in resources/assets/fonts/ or even in public/fonts/?

I'm trying to extend the Webpack config of Laravel by using mix.webpackConfig as described in the Laravel documentation.

My webpack.mix.js:

// Load webpack mix
let mix = require('laravel-mix');

...

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                use : {
                    loader : "file-loader",
                    options: {
                        name: "fonts/[name].[ext]",
                    },
                }
            }
        ]
    }
});

...

Hope someone can help me out.

Regards,
TK

[robbyrice]

I could be wrong but I think all you would have to do is ../fonts/... because webpack will try to resolve the file name relative to app.scss and not the node_modules folder. That way you wouldn't even need to modify the webpackConfig object.

[ankurk91]

Just reference your font files in scss or css and webpack will auto copy them to public folder. It will also rewrite the URLs so it will load correctly.

[Tklaversma]

@robbyrice @ankurk91 For some reason it didn't copy the folder before...now it does.
And ../fonts/ is indeed working. Thanks guys.

You can close this issue.

[ankurk91]

@Tklaversma
We can not close the issue, you or repo owner can only close the issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.