Fonts don't load in BrowserSync external access and .test site

sage
1

I am trying to include a custom font by putting the font files into assets/fonts and then importing the following scss stylesheet into main.scss:

@font-face {
  font-family: 'Lyon Text';
  src: url('../fonts/LyonText-Regular-Web.eot');
  src:
    url('../fonts/LyonText-Regular-Web.eot?#iefix') format('embedded-opentype'),
    url('../fonts/LyonText-Regular-Web.woff') format('woff'),
    url('../fonts/LyonText-Regular-Web.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

When I run yarn build, I see the font files in the dist folder as I should. Also, I can see that the font is loaded properly when I work on localhost. But when I use the external URL http://169.254... or the http://example.test dev-url, the font is not being loaded.

Checking the console log, I get two different errors for both cases.

When trying to access from the external url, I get the error:

Failed to load resource: net::ERR_CONNECTION_REFUSED

When trying to access from the dev url, I get the error:

Access to Font at ‘http://localhost:3000/app/themes/mytheme/dist/fonts/LyonText-Regular-Web.woff’ from origin ‘http://example.test’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://example.test’ is therefore not allowed access.

Does anyone have a solution for this? It is important for me to be able to have access to the font from both these urls. The site is not in production yet, so I don’t know if it would work there.

2

Hey @manalyse - take a look at this issue for a potential workaround: https://github.com/roots/sage/issues/2002

In my experience, visiting both localhost and the devUrl work, and only the IP address isn’t able to load the fonts.

Are you trying to visit the devUrl while you have yarn start running? You will need to stop yarn start and then run yarn build before the devUrl will work properly.

Your production should work flawlessly.

1 Like