Laravel-Mix local fonts

I am currently trying to get laravel-mix working with local fonts. This is my _typography.scss

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

This is my folder structure:

assets
│   fonts
│   sass
│   js

And my webpack.mix.js

mix.js('./assets/js/app.js', './js/app.js')
    .sass('./assets/sass/main.scss', './css/app.css')
    .browserSync({
        proxy: 'sns.test',
        files: ['**/*.html', '**/*.scss', '**/*.js']
    })
    .sourceMaps();

Okay, so far it's all working. But in the compiled CSS file the path to the fonts is wrong. The path is src: url(/fonts/Metropolis-ExtraBold..... so the font can't be loaded.

So the browser is looking for the font in: http://localhost:3000/fonts/Metropolis-ExtraBold.woff2

But it has to be: http://localhost:3000/site/themes/mytheme/fonts/Metropolis-ExtraBold.woff2

Does anybody has any idea how to get this whole font thing working?