<div id="root"></div>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.container {
  width: 300px;
}
.text {
  font-size: 40px;
}

const convertFontFiletoBase64 = async (file: File) => {
  const result_base64 = await new Promise((resolve) => {
    const fileReader = new FileReader();
    fileReader.onload = () => resolve(fileReader.result);
    fileReader.readAsDataURL(file);
  });
  return result_base64 as string;
};

const onFileInput = async (e: SyntheticEvent<HTMLInputElement, Event>) => {
  const { files } = e.currentTarget;
  if (files && files?.length > 0) {
    const font = await convertFontFiletoBase64(files[0]);

    // @ts-ignore because FontFace is experimental and not yet supported by TS.
    const fontFace = new FontFace("uploadedFont", `url(${font})`);
    (document as any).fonts.add(fontFace);
    await fontFace.load();
  }
};

const App = () => {
  return (
    <div className="container">
      <input type="file" onInput={onFileInput} accept={".ttf"} />
      <span className="text" style={{ fontFamily: "uploadedFont" }}>
        Sample Text
      </span>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));