Unicode Characters

The PDFExport component and the savePDF method support the Unicode standard only if the fonts you provide contain glyphs for the referenced Unicode characters.

Otherwise, depending on the specifics of each font, the font renders as a default glyph—normally, a blank rectangle.

This following example demonstrating how to add different font with the corresponding glyphs.

<style>
   /*
       Use the DejaVu Sans font for display and embedding in the PDF file.
       The standard PDF fonts have no support for Unicode characters.
   */
   div {
     font-family: "DejaVu Sans", "Arial", sans-serif;
     font-size: 12px;
   }
    /*
     The examples load DejaVu Sans from the Kendo CDN. Other fonts
     should be hosted from your application.
      Official site of the Deja Vu Fonts project:
     https://dejavu-fonts.github.io/
   */
   @font-face {
     font-family: "DejaVu Sans";
     src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
   }
    @font-face {
     font-family: "DejaVu Sans";
     font-weight: bold;
     src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
   }
    @font-face {
     font-family: "DejaVu Sans";
     font-style: italic;
     src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
   }
    @font-face {
     font-family: "DejaVu Sans";
     font-weight: bold;
     font-style: italic;
     src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
   }
 </style>
class App extends React.Component {
    pdfExportComponent;
     render() {
        return (
            <div>
                <div className="example-config">
                    <button className="k-button" onClick={() => {this.pdfExportComponent.save();}}>Export PDF</button>
                </div>
                <PDFExport ref={(component) => this.pdfExportComponent = component} paperSize="A4">
                    <Grid
                        style={{ maxHeight: '400px' }}
                        data={products}
                    >
                        <GridColumn field="ProductID" title="ID" width="40px" />
                        <GridColumn field="ProductName" title="Name" width="250px" />
                        <GridColumn field="Category.CategoryName" title="CategoryName" />
                        <GridColumn field="UnitPrice" title="Price" width="80px" />
                        <GridColumn field="UnitsInStock" title="In stock" width="80px" />
                    </Grid>
                </PDFExport>
            </div>
        );
    }
}
 const products = [
    {
        "ProductID": 1,
        "ProductName": "Chai",
        "CategoryID": 1,
        "UnitPrice": 18.0000,
        "UnitsInStock": 39,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
        }
    },
    {
        "ProductID": 2,
        "ProductName": "Chang",
        "CategoryID": 1,
        "UnitPrice": 19.0000,
        "UnitsInStock": 17,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
        }
    },
    {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "CategoryID": 2,
        "UnitPrice": 10.0000,
        "UnitsInStock": 13,
        "Category": {
            "CategoryID": 2,
            "CategoryName": "Condiments",
        }
    },
    {
        "ProductID": 4,
        "ProductName": "NuNuCa Nuß-Nougat-Creme",
        "CategoryID": 2,
        "UnitPrice": 22.0000,
        "UnitsInStock": 53,
        "Category": {
            "CategoryID": 2,
            "CategoryName": "Condiments",
        }
    }
];
 ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

The PDF export does not support the substitution of glyphs between fonts. If the text contains glyphs which are not available in the current font but might be available in another font that was declared, the font will still use the default glyph.

In this article