Embedded Fonts

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

Basic Usage

To embed the fonts in the PDF document:

  1. Declare a font face.
  2. Host the TrueType fonts (.ttf) in the domain of the application.
  • Use the same font to style the content in the browser.
  • The fonts that you use may require a separate license for their embedding in PDF documents.

For the complete example, refer to the telerik/kendo-angular GitHub repository.

import { Component } from '@angular/core';
import { InvoiceRow } from './invoice-row';
import { invoiceData } from './invoice-data';

  selector: 'app-root',
  template: `
    <div class="example-config">
      <button kendo-button (click)="pdf.saveAs('invoice.pdf')">
        Save As PDF...

    <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
      <app-invoice [data]="data"></app-invoice>
  styles: [`
    @font-face {
      font-family: 'DejaVu Sans';
      src: url('assets/DejaVuSans.ttf') format('truetype');

    kendo-pdf-export {
      font-family: "DejaVu Sans", "Arial", sans-serif;
      font-size: 12px;
export class AppComponent {
  data: InvoiceRow[] = invoiceData;

Advanced Scenarios

For more advanced scenarios on font embedding, refer to the article on embedding fonts from the low-level Drawing library.

In this article