New to Kendo UI for jQuery? Download free 30-day trial

Pack Fonts for PDF Export with the Drawing Library

Environment

Product Progress® Kendo UI® Drawing Library
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I transform the content during the PDF export while applying the Kendo UI Drawing API?

Solution

To provide better quality for the output in PDF, the library requires access to the same fonts as the browser uses to display the elements that are produced. Otherwise, neither the layout of the PDF, nor the non-ASCII characters are properly displayed.

To declare the fonts, you need to:

  1. Write the appropriate @font-face rules in the CSS.
  2. Host the CSS file on the same domain as the page.
  3. Keep the font files on the same domain too. Otherwise, you need to make sure that the server, which hosts the fonts, sends the proper HTTP access control (CORS) headers.

Also, when declaring the fonts, it is not possible to serve the page over the file:/// URLs when needed—for example, in mobile applications.

The @telerik/kendo-pack-fonts module packs one or more fonts into JavaScript code. In this way, you can load that code by using a <script> tag.

The packed code works:

  • Regardless of the location you store it—this means that you do not need CORS headers.
  • Even if the page is loaded to the file:// URL, because you do not need an AJAX request to load the fonts into the Kendo UI PDF library.

For more information, refer to the project on GitHub.

See Also

In this article