How to add and use Local custom font in a Laravel+ TailwindCss+ Vuejs project?

As the title suggests, I'm trying to add and use my own custom fonts in my project that I'm building using Laravel 8 as backend , Vuejs 3 as frontend and tailwindCSS 2 as my CSS framework.

I've tried many ways but the only time I got my font displayed was when I used a <style> tag in my .blade.php with normal css (@font-face) & ids inside of it. I also tried "@layer base" way (as said in the official docs) but it didn't work

\resources\css\app.css

@layer base {
        @font-face {
        font-family: IRANSans;
        font-weight: 900;
        src:url(/fonts/IRANSansWeb_Black.woff2) format("woff2"), 
        url(/fonts/IRANSansWeb_Black.woff) format("woff"),
         url(/fonts/IRANSansWeb_Black.ttf) format("truetype");
      }
      
      @font-face {
        font-family: PlatNomor;
        font-weight: 900;
        src:url(/fonts/PlatNomor.woff2) format("woff2"), 
        url(/fonts/PlatNomor.woff) format("woff"),
         url(/fonts/PlatNomor.ttf) format("truetype");
      }  
}

*I've tried many urls but none of them worked

\tailwind.config.js

theme: {
    fontFamily: {
      'irsans': ['IRANSans'],
      'pln': ['PlatNomor']
    },

and the class names I used inside of Vuejs components : font-irsans & font-pln

So my questions are:

1. Where should I put my font files?
2. How do I let tailwind know where my font files are in this project?