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?