Custom Fonts not working

[MehrshadHeisenberg3]

Hi everyone
I am working on a project with React, Vite and Tailwindcss

When I try to add a custom font with font-face it seems that tailwindcss can not find it and show it properly.

I have tried anything I could think of and as of now I have my index.css file in the src folder which in there I have defined my fonts in the base layer using @font-face

Also in my tailwind.config,js file I have extended the font family that I need.

But when I use it in App.jsx it does not work and does not show the font that I have defined using font-face

I would really appreciate your help

Also here is the repo so you can check it out yourself:
The related repo

[wongjn]

As per the syntax for src in @font-face according to MDN, you'd want truetype, not ttf for the format() values:

 @layer base {
   @font-face {
     font-family: "Ubuntu";
     font-weight: 400;
-    src: url("../public/fonts/Ubuntu-Regular.ttf") format("ttf");
+    src: url("../public/fonts/Ubuntu-Regular.ttf") format("truetype");
   }
 
   @font-face {
     font-family: "Ubuntu";
     font-weight: 500;
-    src: url("../public/fonts/Ubuntu-Medium.ttf") format("ttf");
+    src: url("../public/fonts/Ubuntu-Medium.ttf") format("truetype");
   }
 
   @font-face {
     font-family: "Ubuntu";
     font-weight: 700;
-    src: url("../public/fonts/Ubuntu-Bold.ttf") format("ttf");
+    src: url("../public/fonts/Ubuntu-Bold.ttf") format("truetype");
   }

You may also wish to consider changing the paths to the recommended / instead of ../public:

 @layer base {
   @font-face {
     font-family: "Ubuntu";
     font-weight: 400;
-    src: url("../public/fonts/Ubuntu-Regular.ttf") format("truetype");
+    src: url("/fonts/Ubuntu-Regular.ttf") format("truetype");
   }
 
   @font-face {
     font-family: "Ubuntu";
     font-weight: 500;
-    src: url("../public/fonts/Ubuntu-Medium.ttf") format("truetype");
+    src: url("/fonts/Ubuntu-Medium.ttf") format("truetype");
   }
 
   @font-face {
     font-family: "Ubuntu";
     font-weight: 700;
-    src: url("../public/fonts/Ubuntu-Bold.ttf") format("truetype");
+    src: url("/fonts/Ubuntu-Bold.ttf") format("truetype");
   }

Or move them inside the src folder and reference them there.

[MehrshadHeisenberg3]

Thanks mate, I'll try it and let you know

But why should I reference the fonts like that?

[wongjn]

As per the documentation:

• You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png.