As development enviroment i am using a subfolder with my projects inside. That means for example i got http://localhost/projectOne/ as my WP instance.
My issue is that i can not get the font’s to work consistently on all variations.
I need for dev: port 80 + 3000
And on build: port 80
to load the fonts.
Now on build I get this path for my index.css file. Which is fine:
http://localhost/projectOne/wp-content/themes/wptheme.starter/dist/index.4c3805.css?ver=6.0
From images, to assets in general etc everything works. However the font’s don’t seem to follow the same logic. They use this path.
http://localhost/fonts/webfont-test.2f878f.woff2
I have my font files included in sass like follows:
@font-face {
font-family: 'TheSans';
font-display: fallback;
font-style: normal;
font-weight: 300;
font-stretch: normal;
src: url('/src/fonts/webfont-test.woff2') format('woff2'),
url('/src/fonts/webfont-testt.woff') format('woff');
}
I have also tried @fonts, ~@fonts ./dist/fonts etc.
It does not seem to make a difference.
First of all - why? Second, how can I fixt this?
This has been on sage10 projects without configuration, but also on projects that use bud.js without sage10. This far I have just inlined the fonts manually. However this specific case does not allow it, so I would like to get around and fully fix it.