---
title: "Fonts — Svelte"
description: "The fonts people can write text in, adding your own, and text in any language."
integration: "Svelte"
source: "https://www.embedpdf.com/docs/viewer/svelte/features/fonts"
---

# Fonts

Text people write in the viewer, in a text box, a callout, a form field or a redaction label, shows
while they type in the very font the PDF will carry, letter for letter, so what they see is what
they save. Characters a font doesn't have come from fallback fonts, so text in any language shows,
right to left where it reads that way.

## Choosing a font

The style panel's font picker offers every font text can be written in, in three groups:

| Group            | The fonts                                             |
| :--------------- | :---------------------------------------------------- |
| In this document | The PDF's own fonts that new text can be written in   |
| Your fonts       | The ones you give the viewer, and the engine's own    |
| Standard         | Helvetica, Times and Courier, which every PDF app has |

Most PDFs carry only the characters their text uses, so their fonts can't be used for new text, and
the picker doesn't offer them. A box that already has such a font keeps it: the picker shows it as
the box's font, greyed, with why it can't be chosen for another box.

## Your fonts

Give the viewer your brand's typeface, or a font for a script the standard fonts don't cover, and
the picker offers it under Your fonts:

```js
{
  fonts: [
    { key: 'brand-sans', url: '/fonts/BrandSans-Regular.ttf', label: 'Brand Sans' },
    { key: 'noto-sc', url: '/fonts/NotoSansSC-Regular.otf', label: 'Noto Sans SC' },
  ],
}
```

| Field              | What it is                                                                                                              | Default            |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------- | :----------------- |
| `key`              | Your name for the font: what a text box's `fontFamily` names it by. Not one of the standard names, such as `helvetica`. | required           |
| `url`              | Where the TTF or OTF file is, on your site or a server that allows it (CORS)                                            | `url` or `data`    |
| `data`             | The file's bytes, in place of `url`                                                                                     |                    |
| `familyName`       | The family the PDF names it by                                                                                          | read from the file |
| `weight`, `italic` | Its style                                                                                                               | read from the file |
| `label`            | What the picker calls it                                                                                                | its family's name  |

Each file is fetched once, when the viewer starts. Saving puts only the characters people used
into the PDF.

## Text in any language

Hebrew and Arabic work with no setup: the engine fills them in from Noto Sans Hebrew and Noto Naskh
Arabic.

For another script, such as Chinese, give the engine a fallback font, which fills in the
characters other fonts lack:

```js
{
  engine: {
    fallbackFonts: [{ key: 'noto-sc', url: '/fonts/NotoSansSC-Regular.otf' }],
  },
}
```

Latin always shows: a font without it, such as Noto Sans Hebrew, keeps its Latin in Helvetica, in
the same weight. A character no font has shows as a box, both while typing and in the PDF, so no
text is lost without a trace.

## Typed signatures

A signature typed in the signature maker is written in a handwriting font. Pick the fonts it offers
with `plugins.signature.fonts`; see [Signatures](forms-and-signatures#signatures).