Downloaded font is not being rendered correctly on the browser

I am having issues with fonts I downloaded that are not being rendered on the browser.

I define the font face in the index.css file, which is the root css file.

@font-face {
  font-family: "RecoletaAlt";
  src: local("RecoletaAlt") url("./assets/fonts/RecoletaAlt.woff")
    format("woff") url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

I have the font loaded into the index.html page too

<link
  rel="prefetch"
  href="./src/assets/fonts/RecoletaAlt.woff"
  as="font"
  type="font/woff"
/>
<link
  rel="prefetch"
  href="./src/assets/fonts/RecoletaAlt.woff2"
  as="font"
  type="font/woff2"
/>

Then I try using the font here as shown. When I inspect it in the browser, it shows that the font-family is RecoletaAlt but when I check the computer tab, I see, "Family name: Times PostScript name: Times-Bold, Font origin: Local file(11 glyphs)" which shows that it is not using the font. Also when the page loads, and I check the network tab I see the font in the network request which shows that it is being loaded.

<h2
   className="text-3xl font-semibold text-center mb-6"
   style={{
      fontFamily: "RecoletaAlt",
      fontSize: "30px",
      fontWeight: "700",
   }}
 >Get started</h2>

Below is my file structure

I was able to resolve the issue from the comments made. I realized I omitted the comma between the different font formats.

Before (Not working)
@font-face {
  font-family: "RecoletaAlt";
  src: local("RecoletaAlt") url("./assets/fonts/RecoletaAlt.woff")
    format("woff") url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

After (works fine)
@font-face {
  font-family: "RecoletaAlt";
  src: local("RecoletaAlt"), url("./assets/fonts/RecoletaAlt.woff")
    format("woff"), url("./assets/fonts/RecoletaAlt.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

I hope it helps someone.