opentypejs fetch otf font file working locally but not when imported into codesandbox

I am using opentypejs in order to try and fetch specific fonts on my local server (localhost) to iterate through the glyphs for each font.

I have a codesandbox which is throwing an error:

Unsupported OpenType signature <!do

Not something I see in localhost which is making me think on codesandbox I need to be more explicit about headers, mime types etc.

Here is my basic code:

import opentype from "opentype.js";
const htmlElem = document.querySelector("html");

const fontPath = "./resources";

const options = {
  headers: {
    "Content-Type": "application/x-font-opentype",
  },
};

const fontMap = (fontName) => {
  const url = `${fontPath}/${fontName}`;
  const buffer = fetch(url, options).then((res) => res.arrayBuffer());

  buffer.then((data) => {
    const wrapper = htmlElem.querySelector(".characters ul");
    const font = opentype.parse(data);
    const glyphs = font.glyphs.glyphs;
    for (const [key, value] of Object.entries(glyphs)) {
      if (value.name !== null) {
        const template = `<li>${value.name}</li>`;
        wrapper.insertAdjacentHTML("beforeend", template);
        console.log(value);
      }
    }
  });
};

setTimeout(() => {
  fontMap("LoRes-Bold.otf");
}, 300);

It looks like the error is thrown here:

const font = opentype.parse(data);

Initially I wasn’t passing any options to the fetch function, but I tried adding

const options = {
  headers: {
    "Content-Type": "application/x-font-opentype",
  },
};

But I also had to double check on the correct mime type, and have seen font/opentype,font/otf and other variants (none have worked). I have also tried uploading different font files, but that is definitely not the issue.

Does anyone have any idea what might be happening? Hopefully the codesandbox has everything that is needed.