Unicode and Embedded Fonts

To match the output from the browser, embed the same fonts in the exported PDF document.

The PDF standard fonts cover only the basic ASCII character set. To render Unicode characters and to match the output that is rendered by the browser, enable the embedding of fonts by obtaining and hosting the .ttf files and declaring the 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 available for embedding.
  • All characters that you use must be present in the embedded font. For more information, refer to the section on font substitution.

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");
}

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

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

@font-face {
  font-family: "DejaVu Sans";
  font-weight: bold;
  font-style: italic;
  src: url("fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
}

Using Code

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, unless CORS is configured, you are not allowed to specify URLs of different origin (domain, protocol, and port).

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

Font Substitution

All characters (glyphs) which are not available in the set font are substituted by the browser with characters from a fallback font. The PDF Export module has no access to the information about these substitutions. As a result, the substituted characters are rendered as the default glyph which is typically a rectangle. To work around this limitation, use fonts that contain all characters that you use.

In this article