All Components

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 in 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 embedding in PDF documents.
  • The system fonts that the browser uses to render the content on-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, either:

Use CSS Declarations

The following example demonstrates how to apply the @font-face declarations.

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

Use Built-In Options

When you use the defineFont method, call it before a PDF is requested. The object you pass to the defineFont method has to map the font name or style to a URL with the TrueType file. The same-origin policy applies and you cannot specify URLs to different hosts.

The following example demonstrates how to apply the defineFont method.

import { defineFont } from '@progress/kendo-drawing/pdf';

defineFont({
  'Verdana'             : '/fonts/Verdana.ttf',
  'Verdana|Bold'        : '/fonts/Verdana_Bold.ttf',
  'Verdana|Bold|Italic' : '/fonts/Verdana_Bold_Italic.ttf',
  'Verdana|Italic'      : '/fonts/Verdana_Italic.ttf'
});

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.

The right-side font names in the list 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