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

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

    <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
      <app-invoice [data]="data"></app-invoice>
    </kendo-pdf-export>
  `,
  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