New to Kendo UI for Angular? Start a free 30-day trial
Embedded Fonts
To match the content appearance in the browser, embed the same fonts in the exported PDF document.
The PDF Export module does not support right-to-left (RTL) scripts such as Arabic or Hebrew.
Basic Usage
To embed the fonts in the PDF document:
- Declare a font face.
- 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.
ts
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 kendoButton (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.