How to embed local font in React Type Script project to use in pdf-lib

Question

I have a React Type Script Project and I want to embed a local font. I basically need to achieve the similar result to this

const url = 'https://pdf-lib.js.org/assets/ubuntu/Ubuntu-R.ttf'
const fontBytes = await fetch(url).then((res) => res.arrayBuffer())

The fonts are located under assets/fonts/pdf

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

I currently requiring the font like this

const fontNormalBytes = require("../assets/fonts/pdf/Ubuntu-Regular.ttf")

But when I try to use it with pdf-lib, I get an error

Unknown font format

Now, I am not sure if that is because I need to configure the TypeScript React project in order to import fonts or if the arrayBuffer() function does something that needs to be done to the required file too.