Customized pintura works in local but not working in vercel

Question

I want to customize pintura module. Adding "Impact" and "Meme" font to editor. It works in local but not working after deploy to vercel. In vercel, while editing text using 'Impact' or 'Meme' font, it works but after editing, it changes into primary font.

Local Vercel

Meme font is same as Impact but has outline. Some of my source code is here.

//pintura.js

if(textStyles.indexOf("Impact-meme") >= 0)
        textStyles += `-webkit-text-stroke:2px ${fontColor};
            color:transparent !important; background-color:transparent !important;`;

//Editor
------index.module.scss-----

@font-face {
  font-family: "Impact";
  src: local("Impact"),
      url("../../fonts/impact.ttf") format("truetype");
}

@font-face {
  font-family: "Impact-meme";
  src: local("Impact-meme"),
      url("../../fonts/meme.ttf") format("truetype");
}
---------index.tsx--------
markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls({
            fontFamilyOptions: [
              // Add our custom fonts
              ['Impact', 'Impact'],
              ['Impact-meme', 'Meme'],
              ['Arial', 'Arial'],
              ['Helvetica', 'Helvetica'],
              ['Montserrat', 'Montserrat'],
              ['Comic Sans MS', 'Comic Sans MS'],
              // Add the default options
              ...createDefaultFontFamilyOptions(),
            ],
            // Set absolute font size values
            fontSizeOptions: [
              4, 8, 16, 18, 20, 24, 30, 36, 48, 64, 72, 96, 144,
            ],

            // Set absolute line height values
            lineHeightOptions: [
              4, 8, 16, 18, 20, 24, 30, 36, 48, 64, 72, 96, 144,
            ],
          })}