How to render Tamil fonts in PDF using @progress/kendo-react-pdf package in the react app?

Question

I'm creating an app where I have to generate a PDF of a React Component say ABC. The component ABC has both English and Tamil text in it. When I try to generate the component using the @progess/kendo-react-pdf package, the Tamil font isn't rendered properly. Some random characters are printed in the PDF.

For Reference, check out this code

Answer 1

Enable the embedding of fonts by obtaining and hosting the .ttf files and declaring the URLs

https://www.telerik.com/kendo-react-ui/components/drawing/pdf-output/embedded-fonts/

Define the fonts, use the @font-face CSS declarations

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/yourFont.ttf") format("truetype");
  }