Dynamically Loading Fonts

[BasselAshi]

I am currently using Expo's loadAsync to dynamically load fonts on demand. I wanted to integrate these fonts into SKIA since useFonts isn't gonna work with the amount of fonts I am using. I have looked around for similar discussions but only found this which isn't really what I am looking for.

EDIT: Seen this issue here too but it's not really what I'm looking for either.

I have also explored the low-level documentation and attempted to do something like this:

const [f, setF] = useState<SkFont>();
useEffect(() => {
  const load = async () => {
    try {
      await font.load([604], "Tajweed"); // My hook that loads the font I need (there's over 1000)
      const fontManager = Skia.FontMgr.System(); // I have attempted this too: Skia.TypefaceFontProvider.Make();
      const typeface = fontManager.matchFamilyStyle(
        "QCF4604", // This is the correct font family name
        FontStyle.Normal
      );
      const loadedFont = Skia.Font(typeface, 32);
      setF(loadedFont);
    } catch (err) {
      console.error(err);
    }
  };
  load();
}, []);

Later, I use it as follows:

{loadedFont && (
  <Canvas style={{ flex: 1 }}>
    <Text x={30} y={height / 2} text="abc" font={loadedFont} />
  </Canvas>
)}

Nothing loads in case of Skia.FontMgr.System();. The other option (Skia.TypefaceFontProvider.Make()) throws an exception indicating that the font was not found:

Could not find font family QCF4604

Does the library support such behaviour? Is there a different way of properly loading the font dynamically?

[BasselAshi]

Wow that took some digging into the source code but I was finally able to dynamically load the font. Here's my code snippet:

import { Asset } from "expo-asset";

const assets = await Asset.loadAsync(
  QuranFontAssets.Madinah["QCF4604"] // asset (local/remote) URI
);
const data = await Skia.Data.fromURI(assets[0].localUri!!);
const typeface = Skia.Typeface.MakeFreeTypeFaceFromData(data);
customFontMgr.registerFont(typeface!!, "QCF4604");
const fontx = Skia.Font(typeface!!, 32);
setF(fontx);