Fonts not loaded on http://localhost/subfolder

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:


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.


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.

1 Like

I’d highly recommend refining your development environment so that you’re serving your sites from individual hosts, like example1.test and example2.test

1 Like