Arabic letter aren't showing (Roboto font family)

Hussein Najah 2 years 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 Tananaev 2 years ago

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

Hussein Najah 2 years 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.

nooshin 2 years 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