Unable to load fonts (returning 404)

[njj]

Hi all, I've tried various approaches to getting my fonts to load, all which have failed.

The main application is routed through nginx, so I use the paths related to that i.e. web-2 in the less files for loading the fonts:

I am using the -s flag when running storybook to point at ./assets/

When loading the fonts, the less file looks something like:

@font-face{
font-family:"Avenir-Roman";
src:url("/web-2/assets/fonts/avenir/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix");
src:url("/web-2/assets/fonts/avenir/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix") format("eot"),url("/web-2/assets/fonts/avenir/b290e775-e0f9-4980-914b-a4c32a5e3e36.woff2") format("woff2"),url("/web-2/assets/fonts/avenir/4b978f72-bb48-46c3-909a-2a8cd2f8819c.woff") format("woff"),url("/web-2/assets/fonts/avenir/9bdf0737-f98c-477a-9365-ffc41b9d1285.ttf") format("truetype"),url("/web-2/assets/fonts/avenir/15281d0d-e3c2-46e1-94db-cb681e00bfaa.svg#15281d0d-e3c2-46e1-94db-cb681e00bfaa") format("svg");
}

The console error I get is something similar to:

 http://localhost:6006/web-2/assets/fonts/avenir/d513e15e-8f35-4129-ad05-481815e52625.woff2

Does anyone have any advice on how to get these to load properly?

[shilman]

This will work if there is a directory web2 underneath your ./assets/ directory, i.e. <project-dir>/assets/web-2/assets/fonts/.... I think you want url("/fonts/avenir/...") instead.

[njj]

@shilman The project directory is web-2, these fonts resolve in the application just fine, but when pulling in the less files into Storybook I get the 404.

[vanluke]

I have the same issue. Can not load fonts I have got 404

[shilman]

@njj When you run start-storybook it is running its own webserver, and when you run the -p 6006 -s somedir option it serves files under somedir in the root path. For example, if somedir contains a.txt and b.txt, those should show up at http://localhost:6006/a.txt and http://localhost:6006/b.txt.

In your case, everything under the assets directory should show up at the root, e.g. /fonts/avenir/... so you should be referencing that URL, not the one in your example above.

[vanluke]

In my situation the problem was caused by sass loader so i moved font face statements to CSS files and then import this CSS file in sass

[njj]

@shilman Thanks! The solution ended up being:

start-storybook -p 6006 -s ../

[JumboWumbus]

@vanluke
Necro post sorry xoxo
Spent an ungodly amount of time looking for a solution, yours is the one that worked.

Renaming the SCSS file(s) containing font declarations to CSS made it worky