why does a Uint8Array() from buffer returns empty?

I am trying to load a font for pdf-lib to use. In order to use it, i must provide a Uint8Array for pdfDoc.embedFont(font);
For some reason, whenever i create the UInt8Array, it returns empty. The ArrayBuffer is returning something so i am quite confused. I am new to JS so my apologies if this is a dumb question.

var request = new XMLHttpRequest();
request.open("GET", "./resources/skill_positioning.json", false);
request.send(null)
const positionData = JSON.parse(request.responseText);
async function createPdf() {
var fontkit = window.fontkit;
var pdflib = window.PDFLib;
const url = './resources/character_sheet_blank.pdf';
const existingPdfBytes = await fetch(url).then((res) =>
res.arrayBuffer(),
);
const pdfDoc = await pdflib.PDFDocument.load(existingPdfBytes)
pdfDoc.registerFontkit(fontkit);
const customFont = fetch('./resources/fonts/arialnb.ttf').then((response) => {
const buffer = response.arrayBuffer();
return new Uint8Array(buffer);
}).then((buffer) => {
return fontkit.create(buffer);
}).then((font) => {
return pdfDoc.embedFont(font);
}).then((customFont) => {
const pages = pdfDoc.getPages()
const firstPage = pages[0]
const { width, height } = firstPage.getSize()
var curRow = 1;
var curCollumn = 0;
firstPage.drawText('This text was added with JavaScript!', {
x: positionData.boxes[0].x,
y: height - (positionData.boxes[0].y + curRow * positionData.row_height),
size: 110,
font: customFont,
color: pdflib.rgb(0.0, 0.0, 0.0),
})
return pdfDoc;
}).then((pdfDoc) => {
const pdfBytes = pdfDoc.save();
download(pdfBytes, "character_sheet.pdf");
})
}

I have tried to create a new Uint8Array from the array buffer, before and after .then()

arrayBuffer() returns a Promise. Therefore you should write

fetch('./resources/fonts/arialnb.ttf').then((response) => {
    return response.arrayBuffer();
}).then((buffer) => {
    return fontkit.create(buffer);
})

Assigning the result of your fetch call to const customFont is meaningless because your last then block in the chain returns nothing.

Also consider using the async/await syntax which makes promise code more intuitive. In fact you are already using async/await in the first half of the function. Why switch back to then chain?

const response = await fetch('./resources/fonts/arialnb.ttf');
const buffer = await response.arrayBuffer();
const font = await fontkit.create(buffer);
const customFont = await pdfDoc.embedFont(font);
//... continue to work with customFont