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 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 which 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:

Using CSS Declarations

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

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

Using 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 support only ASCII characters. The standard PDF fonts are included in the following list where the right-side font names 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