Fonts 404 error [solved]

1

Hello,

My site: https://2018-fonttest.netlify.com

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. https://github.com/netlify-templates/victor-hugo

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

main.css
image

project tree

image
image.png424×709 19.5 KB

font stylesheet

image
image.png788×520 24.7 KB

2

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

3

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
5

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.

6

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
7

thanks

8

fixed - css issue