My goal is to use custom fonts on my nextjs/tailwind project. The fonts are displayed correctly when i run the project on my local server, even when i make a production build and run it locally but not when i deploy it to the production server. In the console i get the following messages:
GET https://website.com/fonts/Some-Font1.ttf net::ERR_ABORTED 503
GET https://website.com/fonts/Some-Font2.ttf net::ERR_ABORTED 503
I have tried looking for similar errors with no luck. I have tried tweaking the next.config, and added a package called next-fonts but it did not help. Since everything works locally i have to deploy the project every time i make changes which takes ages.
The fonts are ttf files and are in /public/fonts. Other assets in the public folder such as svgs are accessible in production. Curiously the favicon icon which is also in the public folder does not display in production either, also due to a 503 error.
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@font-face {
font-family: "SomeFont";
src: url(/fonts/SomeFont-Regular.ttf);
font-weight: 400;
}