Extract metadata from font dynamically

DESCRIPTION

I’m creating the project which has ability to set custom fonts and apply them to the text. I have default fonts and custom fonts.

I want to add ability for users to add their own fonts from links by the scheme:

1. User inputs/inserts the link to the font in a format https://link.com/fonts/Arial/arial-bold.ttf
2. Program takes the link and extracts metadata from the font, namely: (name, font-weight, font-style)

---

SOME CODE

Font type:

type TFontType = 'recent' | 'default' | 'custom';

type TFontStyle = {
   weight: number | string;
   style: string;
   link?: Nullable<string>;
};

type TFont = {
   id?: string;
   family: string;
   link?: Nullable<string>;
   styles: TFontStyle[];
   type?: TFontType;
};

type TFontController = {
   selected: Nullable<TFont>;
   fonts: TFont[];
};

**The function I already tried to use:**

export async function loadFontFromURL(url: string, fontFamily: string) {
   try {
      const font = new FontFace(fontFamily, `url(${url})`);
      await font.load();
      document.fonts.add(font);

      const fontStyle = font.style || 'normal';
      const fontWeight = font.weight || '400';

      return {
         fontFamily,
         fontStyle,
         fontWeight,
      };
   } catch (error) {
      console.error({ error });
      console.error(`Failed to load font: ${fontFamily} from URL: ${url}`);
      return null;
   }
}

In fact it extracts some styles but they are incorrect.

For example I tried to load Arial Bold Italic font and got:

So, no matter what I upload it will show me normal normal normal…

In addition this way to fetch the font won’t show me font family which is also required