Unicode and Embedded Fonts

To match the output from the browser, embed the same fonts in the exported PDF document.

The PDF standard fonts cover only the basic ASCII character set. To render Unicode characters and to match the output that is rendered by the browser, enable the embedding of fonts by obtaining and hosting the .ttf files and declaring the URLs.

  • The fonts that you use may require a separate license for their embedding in PDF documents.
  • The system fonts that the browser uses to render the content on the screen are not available for embedding.
  • All characters that you use must be present in the embedded font. For more information, refer to the section on font substitution.

Declaring the Fonts

Fonts load on demand which means that you can declare more fonts than you need and have no unnecessary data downloaded or parsed locally.

To define the fonts, use the @font-face CSS declarations.

<style>
  /*
      Use the DejaVu Sans font for displaying and embedding in the PDF file.
      The standard PDF fonts do not support Unicode characters.
  */
  div {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    font-size: 12px;
  }

  /*
    The example loads the DejaVu Sans from the Kendo UI CDN.
    Other fonts have to be hosted from your application.
    The official site of the Deja Vu Fonts project is
    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": "Chef Anton's Cajun Seasoning",
        "CategoryID": 2,
        "UnitPrice": 22.0000,
        "UnitsInStock": 53,
        "Category": {
            "CategoryID": 2,
            "CategoryName": "Condiments",
        }
    }
];

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Font Support

  • The Kendo UI PDF generator supports only TrueType fonts that have a Unicode mapping.
  • To ensure that the automatic font discovery works properly, verify that your CSS reside on the same domain as the web page.

If you declare no fonts, the PDF generator will fall back to the standard PDF fonts which support only ASCII characters.

The following table lists the standard PDF fonts—the font names in the right column are reserved and cannot be used as URLs to TrueType fonts with the defineFont method.

'serif'                  : 'Times-Roman',
'serif|bold'             : 'Times-Bold',
'serif|italic'           : 'Times-Italic',
'serif|bold|italic'      : 'Times-BoldItalic',
'sans-serif'             : 'Helvetica',
'sans-serif|bold'        : 'Helvetica-Bold',
'sans-serif|italic'      : 'Helvetica-Oblique',
'sans-serif|bold|italic' : 'Helvetica-BoldOblique',
'monospace'              : 'Courier',
'monospace|bold'         : 'Courier-Bold',
'monospace|italic'       : 'Courier-Oblique',
'monospace|bold|italic'  : 'Courier-BoldOblique'

Font Substitution

All characters (glyphs) which are not available in the set font are substituted by the browser with characters from a fallback font. The PDF Export module has no access to the information about these substitutions. As a result, the substituted characters are rendered as the default glyph which is typically a rectangle. To work around this limitation, use fonts that contain all characters that you use.

 /