Custom font not working in TinyMCE on ReactJS

Question

I am trying to add Devlys and Kruti Dev font for Hindi typing in TinyMCE but when I type inside the editor, English letters appear instead of Hindi. I am trying to replicate a scenario similar to Microsoft Word where I can type in Hindi letters using an English keyboard with the font installed in the text editor.

I have followed the blog post here with a few modifications. The font seems to be loaded on my application and appears in the dropdown of font selection, however, when I type in the editor with the font selected, english letters appear instead of Hindi.

My Editor code is as follows:

<Editor
        onInit={(evt, editor) => editorRef.current = editor}
        initialValue={props.data}
        init={{
          selector: 'textarea',
          language: 'hi',
          height: 500,
          menubar: false,
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
          ],
          toolbar: 'undo redo | fontfamily | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
          font_family_formats: "KrutiDev= KrutiDev; Courier New=courier new,courier; DevLys=DevLys; Helvetica=helvetica; Symbol=symbol;",
          content_css: "./App.css",
          content_style: "body { font-family:DevLys; font-size:14px }"
        }}
      />

My App.css with font code is as follows:

@font-face {
  font-family: 'DevLys';
  src: url('./fonts/DevLys_010.ttf') format('truetype');
}

@font-face {
  font-family: 'KrutiDev';
  src: url('./fonts/KRDEV010.ttf') format('truetype');
}