I am using esri-leaflet as mapping library and using vectorTileLayer to add custom basemap however struggling with arabic text that is breaking

Question

getWeatherMap() {
    if(this.map){
      this.map.remove();
    }
    const saudiArabiaCenter = [45.0792, 23.8859];
    this.map = L.map(`map`, {
      center: L.latLng(saudiArabiaCenter[1], saudiArabiaCenter[0]),
      zoom: 6,
      minZoom: 3,
      extent: [4034389.34, 1606584.16, 6328654.48, 3423574.81]
    });



      const baseMapEsriLayer = new esriVector.VectorTileLayer("example/vectorTileServer", {
      apikey: "xyz",
      pane: 'basemap',
      style: (style) => {
        style.layers.forEach((layer) => {
          if (layer.layout && layer.layout['text-font']) {
            layer.layout['text-font'] = ['Arial Regular']
          }
        });

        console.log(style);

        return style;
      }
    });

  }

So far I have tried changing fonts but no luck. Changing font that is available system or available in Esri vector tile server but no luck. if the font is not available the layers got failed to load.

Added meta charset but still no luck

  <meta charset="UTF-8">