# Lista de fuentes personalizadas

- Human documentation: [https://docs.univer.ai/es-ES/guides/pdfs/ui/fonts](https://docs.univer.ai/es-ES/guides/pdfs/ui/fonts)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/pdfs/ui/fonts.md](https://docs.univer.ai/es-ES/guides/pdfs/ui/fonts.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [pdfs/ui/fonts.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/ui/fonts.es-ES.mdx)

---

El texto PDF y el menú de fuentes del editor usan dos fuentes de datos relacionadas, pero distintas.

| Fuente                                                | Qué controla                                                                         |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------ |
| `document.assets.fonts` y el `fontId` de un fragmento | Metadatos y recursos de fuentes PDF importadas que reconstruyen el contenido nativo. |
| `fontFamily` de un fragmento editable                 | La familia CSS utilizada para componer y renderizar texto editable.                  |
| La lista de fuentes compartida de Univer              | Las opciones del selector de fuentes del inspector PDF.                              |

Añadir una opción a la lista compartida no crea un recurso en `document.assets.fonts` ni descarga o incrusta un archivo de fuente.

## Configurar la lista del editor

Cuando `editor.enabled` es `true`, el inspector PDF usa el `FontFamilyDropdown` compartido. Configura su lista en `UniverUIPlugin`:

```ts
import { UniverUIPlugin } from '@univerjs/ui'

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  customFontFamily: {
    list: [
      { value: 'Inter', label: 'Inter', category: 'sans-serif' },
      { value: 'Noto Serif', label: 'Noto Serif', category: 'serif' },
    ],
    override: false,
  },
})
```

Carga cada fuente del navegador mediante `@font-face` o una hoja de estilos. De lo contrario, Canvas usa una fuente de reserva del navegador.

## Añadir opciones en tiempo de ejecución

Después de cargar la Facade de UI, añade opciones a la misma lista compartida con `addFonts`:

```ts
univerAPI.addFonts([
  { value: 'Inter', label: 'Inter', category: 'sans-serif' },
])
```

Esto solo actualiza la lista de la aplicación; no carga los bytes de la fuente ni reescribe fragmentos PDF existentes.

## Aplicar una fuente a texto PDF editable

Pasa `fontFamily` al insertar texto o actualiza un cuadro de texto mediante la Facade PDF:

```ts
const page = univerAPI.getActivePdf()?.getPageByIndex(0)
const textBox = page?.insertTextBox({
  text: 'Hello PDF',
  fontFamily: 'Inter',
  fontSize: 14,
  left: 36,
  top: 36,
})

textBox?.setTextStyle({ fontFamily: 'Noto Serif' })
```

El texto nativo importado que devuelve `page.getTextSpans()` es una instantánea y no se puede estilizar directamente. Usa `replaceText(...)` para convertirlo en un cuadro editable antes de llamar a `setTextStyle`.