Loading font using fontkit

[tfcb93]

Hi there,
I have been trying to use pdf-lib to generate a PDF in a project, but I have to use a Japanese font, as well I want to allow people to choose a font before rendering it.
The problem is that every time I try to load a font, but I keep getting the error Uncaught (in promise) Error: Unknown font format.
I did a small test in another project just to make it cleaner (the error still occurs).
Don't mind the lack of structure (font in the root along with the js file), and I'm using parcel (that's why the font import has a url: in it).

import { PDFDocument } from 'pdf-lib';
import fontKit from '@pdf-lib/fontkit';
import Noto from 'url:./NotoSansJP-Regular.ttf'; // I'm importing a font directly from the project
 
async function main() {
  const encoder = new TextEncoder();
  const encodedNoto = encoder.encode(Noto); // Enconding the .tff file

  const pdfDoc = await PDFDocument.create();
  pdfDoc.registerFontkit(fontKit);
  const customFont = await pdfDoc.embedFont(encodedNoto.buffer); // This thing keeps getting me an error.
  // I already tried putting the Noto import directly as well.
}

main();

Later I want to use Google Fonts or another repo of fonts to grab fonts or even allow the user to upload fonts to the webpage and use them when generating a PDF.

This is the error I get every time.

Am I doing something wrong? Does it work on the client side (browser)? Thank you very much for the help.

[tfcb93]

Ok. I was waiting for someone to answer me fast, believing I was doing something stupid, and give me enlightenment about this problem. After that, I just decided to open the file before going to sleep and investigate a bit more.
I came to the conclusion that

import Noto from 'url:./NotoSansJP-Regular.ttf';

is only giving me a path to the file, as I printed it out using

console.log(Noto)

it returned me http://localhost:1234/NotoSansJP-Regular.28794770.ttf?1688699731299 (I'm using Parcel in this test project) which is just a string containing a path.

Converting it to an ArrayBuffer using the TextEncoder gave me an ArrayBuffer of 67 bytes, which is wrong. The file actually has 5732824 bytes.

I also tested hosting the font somewhere else and trying to fetch it to see the results and... SUCCESS! I could manage to get the file and
embed the font, but I don't have a dedicated server (and I don't plan to have one for this project), so how can I make it work this way...?

Then I had the dumbest thing I ever thought lol. I will do a fetch to a file in my project... AND IT WORKED. I hated it. I really hated it, but it will be how it's going to be used for now. Unless someone gives me a greater idea of how I should work around it.

This is the code of how I'm loading it:

import { PDFDocument } from 'pdf-lib';
import fontKit from '@pdf-lib/fontkit';
import Noto from 'url:./NotoSansJP-Regular.ttf';

async function main() {
  const test = await fetch(Noto).then((res) => res.arrayBuffer());

  const pdfDoc = await PDFDocument.create();
  pdfDoc.registerFontkit(fontKit);
  const customFont = await pdfDoc.embedFont(test);
}

main();

Again, I don't like this solution, but I hope there is another way to do that, or even someone explains that what I'm doing is ok haha (I doubt tho).