Arabic letter aren't showing (Roboto font family)

Hussein Najah10 months ago

ok, well this is new to me and I know I'm not the best developer as a matter of fact I'm still learning a lot.

so my friend thank you a lot for giving me such amazing help and information.
like really why would u guys have forums if u not gonna provide at least a bit of a hit to help me figure things out.

Anton Tananaev10 months ago

All you did from the very start is provide false statements and accusations. Not sure what kind of help you expected.

Hussein Najah10 months ago

solved the issue, just converted the font from .ttf to .pbf
Used: KlokanTech Noto Sans Regular
moved the files to the public folder to host it locally:

Public
|---fonts
|---|---Noto Sans Regular
|---|---|---rages.pbf

after that, I used an RTL plug-in to fix the issue of the letter not showing correctly.
"العراق" =! "ق ا ر ع ل ق"
and changed the font the fontFont func.

//mapUtil.js 
export const findFonts = (map) => {
  const fontSet = new Set();
  const { layers } = map.getStyle();
  layers?.forEach?.((layer) => {
    layer.layout?.["text-font"]?.forEach?.(fontSet.add, fontSet);
  });
  const availableFonts = [...fontSet];
  const regularFont = availableFonts.find((it) => it.includes("Regular"));
  if (regularFont) {
    return [regularFont];
  }
  const anyFont = availableFonts.find(Boolean);
  if (anyFont) {
    return [anyFont];
  }
  //The font is not  Noto Sans it's actual name is KlokanTech Noto Sans Regular.
  return ["Noto Sans Regular"];
};

and finally changed the glyphs

//useMapStyles.js
const styleCustom = ({ tiles, minZoom, maxZoom, attribution }) => {
  const source = {
    type: "raster",
    tiles,
    attribution,
    tileSize: 256,
    minzoom: minZoom,
    maxzoom: maxZoom,
  };
  Object.keys(source).forEach(
    (key) => source[key] === undefined && delete source[key]
  );
  return {
    version: 8,
    sources: {
      custom: source,
    },
    //Changed the old one to this so it's will be hosted locally
    glyphs: "/fonts/{fontstack}/{range}.pbf",
    layers: [
      {
        id: "custom",
        type: "raster",
        source: "custom",
      },
    ],
  };
};

Maybe someone might find this helpful in the future.

Thanks.

nooshin7 months ago

hi,
would you please tell me more about changing font of devices? I cant change it to support persian text.
thank you so much