Font not load in web-worker

[lysari]

I try move process to web worker off my main thread ( prevent block UI ), but I got an issue is font not load correct.
note: it working normal in browser main thread.

import { getDocument, GlobalWorkerOptions } from 'http://localhost:4200/assets/package/build/pdf.mjs'; //v4.10.38
GlobalWorkerOptions.workerSrc = 'http://localhost:4200/assets/package/build/pdf.worker.mjs'; //v4.10.38

addEventListener('message', e => {
  const { type, payload } = e.data;
  console.log(type, payload);
  if (type === 'render') {
    const data = getDocument({
      data: payload.options?.data || null,
      url: payload.options?.url ? new URL(payload.options?.url) : null,
      useSystemFonts: false,
      disableFontFace:false,
      standardFontDataUrl: 'http://localhost:4200/assets/package/standard_fonts/',
    });
    data.promise.then(async (pdf) => {
      const pagePdf = await pdf.getPage(payload.pageIndex);
      const res = await renderPage(pagePdf, { scale: 3 });
      postMessage({ type: 'rendered', payload: res });
    })
      .catch((error) => {
        postMessage({ type: 'error', payload: error });
      });
  }
});

class OffscreenCanvasFactory {
  create(width, height) {
    const canvas = new OffscreenCanvas(width, height);
    return {
      canvas,
      context: canvas.getContext('2d'),
    };
  }

  reset(canvasAndContext, width, height) {
    canvasAndContext.canvas.width = width;
    canvasAndContext.canvas.height = height;
  }

  destroy(canvasAndContext) {
    canvasAndContext.canvas.width = 0;
    canvasAndContext.canvas.height = 0;
  }
}

class WorkerImage {
  constructor() {
    throw new Error("HTMLImageElement is not supported in Web Workers.");
  }
}

const fakeImage = new OffscreenCanvas(1, 1);
const fakeContext = fakeImage.getContext("2d");
fakeContext.fillStyle = "white";
fakeContext.fillRect(0, 0, 1, 1);

const ImageReplacement = function () {
  return fakeImage;
};

globalThis.HTMLImageElement = ImageReplacement;

function renderPage(
  page,
  options,
) {
  return new Promise(async (resolve, reject) => {
    try {
      const viewport = getPDFPageViewPort(
        page,
        options,
        options?.scale || 1
      );
      const canvasFactory = new OffscreenCanvasFactory();
      const { canvas, context } = canvasFactory.create(viewport.width, viewport.height);
      await page.render({
        canvasContext: context,
        viewport: viewport,
        canvasFactory: canvasFactory,
        textLayerMode: 0,  // Disable text layer (can help with rendering text issues)
        enhanceTextSelection: true, // Improve text rendering for selection
        usePureCanvas: true,  // Force use of the pure canvas for rendering
      }).promise;
      resolve({
        data: await canvas.convertToBlob(),
        width: viewport.width,
        height: viewport.height,
      });
    } catch (error) {
      console.log('Failed to render PDF page:', error);
      reject(null);
    }
  });
}

function getPDFPageViewPort(
  page,
  options = {},
  scale,
  LIMIT_CANVAS_DIMENSION = 5000,
) {
  const viewport = page.getViewport({ ...options, scale: scale });
  const width = viewport.width;
  if (width > LIMIT_CANVAS_DIMENSION) {
    const newScale = LIMIT_CANVAS_DIMENSION / width;
    const bias = 1;
    return page.getViewport({ ...options, scale: newScale * bias });
  }
  return page.getViewport({ scale: scale, ...options });
}

showing :