# Unicode and Embedded Fonts

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

The standard PDF fonts cover only the basic ASCII character set. To render Unicode characters and match what the browser renders on screen, enable font embedding: obtain and host the `.ttf` files, then declare their URLs.

> * The fonts you use can require a separate license for embedding in PDF documents.
> * The system fonts that the browser uses to render content on screen are not available for embedding.
> * Every character you use must be present in the embedded font. For more information, refer to the section on [font substitution](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/pdf-output/embedded-fonts#font-substitution).

## Declaring the Fonts

Fonts load on demand, so you can declare more fonts than you need without downloading or parsing unnecessary data. Choose a declaration method based on your workflow:

* [CSS `@font-face` declarations](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/pdf-output/embedded-fonts#using-css-declarations)—Keep font declarations next to your other styles, with no extra imports from the Drawing library. Use this approach for most cases, when the list of fonts is fixed at build time. The CSS file itself must be on the same domain as the page for automatic font discovery to work (see [Font Support](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/pdf-output/embedded-fonts#font-support)).
* [The `defineFont` method](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/pdf-output/embedded-fonts#declaring-fonts-at-runtime)—Declare fonts from code instead of CSS. Use this approach when you need to compute font URLs dynamically at runtime—for example, based on the current locale or theme—or want to keep font declarations next to your export logic. You must call it before the PDF file is requested, and it is still subject to the same-origin and CORS restrictions described below.

### Using CSS Declarations

Use this approach for most cases—it keeps font declarations next to your other styles and requires no extra imports from the Drawing library.

The following code snippet demonstrates how to apply the [`@font-face` CSS declarations](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).

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

The following example demonstrates how to declare [`@font-face` CSS declarations](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face).

[Demo Source](https://demos.telerik.com/kendo-vue-ui/drawing/pdf-output/embedded-fonts/source.txt)

### Declaring Fonts at Runtime

Use this approach when you need to declare fonts from code rather than CSS—for example, to compute font URLs at runtime instead of hardcoding them in a stylesheet.

To use the built-in [`defineFont`](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/definefont) method from the Drawing library, call it before the PDF file is requested. The object you pass to `defineFont` must map each font name or style to a URL of a `TrueType` file. The same-origin policy applies—unless you configure [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), you cannot specify URLs from a different origin (domain, protocol, or port).

```ts
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

> * PDF export supports only TrueType fonts that have a Unicode mapping.
> * For automatic font discovery to work, your CSS files must reside on the same domain as the web page.

If you don't declare any fonts, PDF export falls back to the standard PDF fonts, which support only [ASCII characters](https://www.asciitable.com/).

The following list shows the standard PDF fonts. The mapped values are reserved names and cannot be used as URLs to TrueType font files with the `defineFont` method.

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

The browser substitutes any character (glyph) that is missing from the set font with a character from a fallback font. Because PDF export has no access to information about these substitutions, it renders the substituted characters as the default glyph, which is typically a rectangle. To avoid this, choose a font that includes every character your content uses.

## Suggested Links

* [API Reference of the Drawing Library](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api)
* [PDF Options by the Drawing Library](https://www.telerik.com/kendo-vue-ui-develop/components/drawing/api/pdf/pdfoptions)