Fonts 404 error [solved]


My site:

I am trying to add some fonts to a website. They appear to load correctly in chrome, however, I get 404 errors saying the files are missing. They do appear in firefox without console errors. I am using the netlify victor-hugo boilerplate.

The font stylesheets are being imported into the main.css. The following pictures show the project structure and css.


project tree

font stylesheet

Hello, could you try using /fonts/ instead of …/fonts? Make sure the fonts directory is at the root level of your static assets directory

I’m not sure the assumption you’re using for that path will work. Like @Weru says, put your fonts in /static in your project (under “site” for you I think), which gets merged by Hugo to the root of your site on publish.

Reference the files accordingly.

1 Like

I have all the font files in /static/fonts/ folder

All the files are copied over to /dist/fonts/ folder

I have my @font-face in the main.css as follows

@font-face {
  font-family: 'my-font';
  src: url("/fonts/my-font");
  src: url("/fonts/my-font") format('embedded-opentype'),
    url("/fonts/my-font") format('woff'),
    url("/fonts/my-font") format('truetype'),
    url("/fonts/my-font") format('svg');
  font-weight: bold;
  font-style: normal;

My command line says source is compiled without error.

However, the fonts are not displayed, and there are no font files under ‘sources’ tab of the chrome dev tools.

But if I go to url/fonts/my-font.woff the file actually downloads to the browser.

Please don’t open multiple topics for the same issue.

If you would like folks to help you, give requesting help a read, then post a link to a git repo.

1 Like


fixed - css issue