Embedded Fonts

When you export content to PDF, the exported output has to match what you see in the browser.

That is why you need to make the fonts that you use available for embedding by obtaining and hosting the .ttf files, and declaring their 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 accessible to the application.

Declaring the Fonts

Fonts load on demand. This means that you can declare more fonts than you need without worrying that unnecessary data will be downloaded or parsed. To define the fonts, use the @font-face CSS declarations.

<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": "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 do not declare any fonts, the PDF generator will fall back to the standard PDF fonts which are listed below. The standard PDF fonts support only ASCII characters.

'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