@Font-face 404 in web host, fine locally

So I've been developing locally a small site for a few days and wanted to host it on my web host (OVH) in order to share it with a few people and eventually go live.

The site uses the Laravel framework and uses 4 fonts of the same family (lato) from google fonts which have been downloaded and saved in css/fonts/

I added these fonts to my css like so:

@font-face {
font-family: 'latoregular';
src: url('fonts/lato-regular.eot');
src: url('fonts/lato-regular.eot?#iefix') format('embedded-opentype'), url('fonts/lato-regular.woff2') format('woff2'), url('fonts/lato-regular.woff') format('woff'), url('fonts/lato-regular.ttf') format('truetype'), url('fonts/lato-regular.svg#latoregular') format('svg');
font-weight: normal;
font-style: normal;

As you can see I've thought of other browsers and added multiple formats.

Locally speaking (valet on mac); everything is fine. But after I uploaded everything to my webhost and opened the address in the same browser, seperate tab; I get 404 for each font request.

This is almost certainly a web host issue. I've looked online but all the convos i've found are about wrong URL's. Mine can't be wrong since the work locally and laravel routes them the same way... Unless I'm missing something?

I'd appreciate any help!

Thanks All!