Embedded Fonts

When you export content in PDF, the PDF output has to be identical with the content that is rendered by the browser, including the fonts.

To render the same fonts between the source and the output, enable their embedding by the exported PDF through obtaining and hosting the .ttf files and declaring the URLs. Custom fonts have to support the rendering of Unicode characters in the PDF output as well.

  • 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.

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'

In this article