404 error with mp4's & fonts

Support
1

site: https://stately-sundae-1f7c4f.netlify.app/

I am getting 404 error messages from my mp4’s and fonts. I am able to use these videos and fonts in my local sever but once deployed to netlify they are throwing an error. I have used these exact videos with the exact syntax and exact path, and deployed to netlify before on a different site and they’ve worked just fine, but for some reason on this site they arent working.

/src/components/images/projects/portfolio-v2-vid.mp4:1 Failed to load resource: the server responded with a status of 404 ()
/src/components/images/projects/travel-journal-vid.mp4:1 Failed to load resource: the server responded with a status of 404 ()
/src/components/images/projects/password-generator-vid.mp4:1 Failed to load resource: the server responded with a status of 404 ()
/src/components/images/projects/meme-generator-vid.mp4:1 Failed to load resource: the server responded with a status of 404 ()
/src/components/images/projects/restaurant-vid.mp4:1 Failed to load resource: the server responded with a status of 404 ()
/src/components/images/projects/unit-converter-vid.mp4:1 Failed to load resource: the server responded with a status of 404 ()
/src/components/images/projects/le-wagon-demo-day.mp4:1 Failed to load resource: the server responded with a status of 404 ()
Gerstner-Programm-Regular.woff:1 Failed to load resource: the server responded with a status of 404 ()
Gerstner-Programm-Light.woff:1

this is in my index.css
@font-face {
font-family: ‘Gerstner-Regular’;
src: url(“./src/assets/fonts/Gerstner-font/Gerstner-Programm-Regular.woff”) format(‘woff’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Gerstner-Light’;
src: url(“./src/assets/fonts/Gerstner-font/Gerstner-Programm-Light.woff”) format(‘woff’);
font-weight: light;
font-style: normal;
}

html {
font-family: ‘Gerstner-Regular’, ‘PT Sans’;
margin: 0;
padding: 0;
overflow-x: hidden;
}

this is the route to me mp4:
videoSrc:‘./src/components/images/projects/portfolio-v2-vid.mp4’

2

Hi @MNicolaysen thanks for the post and welcome to the Netlify Support Forums.
First of all how are you building your website and are you using a framework?
Secondly if possible can you provide a repository to your site for me to help with the debugging

If you are also experiencing some errors during build, kindly share that as well.

Thanks.

1 Like
3

Hey @clarnx,

Thanks for the reply. I’ve set up my application with vite, using React (JS). The build is with npm run build and this is the error it throws in the build for the font; didn’t resolve at build time, it will remain unchanged to be resolved at runtime. There is no error for the mp4’s

this is my repo:

1 Like
4

ISSUE FIXED

Moved images and assets/fonts folder to the public folder then change the path name accordingly and removed the dot at the beginning and dont include “public” in the path e.g “/images/projects/meme-generator-vid.mp4” and the same for fonts e.g “/assets/fonts/Gerstner-font/Gerstner-Programm-Light.woff”

1 Like
5

Hi @MNicolaysen,

Happy to hear you were able to resolve the issue. Thanks updating us on how you resolved the issue.

1 Like
6

@clarnx I am also getting an error message on after deploy. here is my https://luxury-tanuki-ae0786.netlify.app/

Siviwe82/weather-react2 (github.com)

1 Like
7

Hi @Siviwe82, thanks for the post.
I took a look at the repository you shared. Looks like your react application is in the my-app folder.
You need to set your base directory during deployment to the my-app directory.
Below are some resources to help you debug possible errors after deployment and also how to properly deploy React applications on Netlify

  1. [Support Guide] I’ve deployed my site but I still see "Page not found”

  2. Framework integrations | Netlify Docs

  3. Deployment | Create React App

Thanks.