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 declare the fonts, use either of the following approaches:

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

To use the built-in defineFont method from the Drawing library, you have to call it before the PDF file is requested. The object you pass to the defineFont method has to map the font name or the style to a URL with the TrueType file. The same-origin policy applies and you are not allowed to specify URLs to different hosts.

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

  '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 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