# Lista de fuentes personalizadas

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

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

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

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

---

## Definición de estructura de fuentes

En Univer, las fuentes se definen usando la interfaz `IFontConfig`:

| Propiedad  | Tipo                                                                   | Descripción                                                                                                                                                         |
| ---------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`    | `string`                                                               | El identificador único de la fuente, normalmente el valor preferido para la familia de fuentes CSS.                                                                 |
| `label`    | `string`                                                               | La clave de traducción para la internacionalización. Si esta clave no se especifica cuando se crea la instancia de Univer, el valor pasado se muestra directamente. |
| `category` | `'sans-serif' \| 'serif' \| 'monospace' \| 'display' \| 'handwriting'` | Categoría de fuente, utilizada para agrupar la interfaz de usuario (opcional).                                                                                      |

> [!NOTE]
> Univer no impide que los usuarios seleccionen fuentes desinstaladas. Si una fuente no está instalada en el cliente, el navegador la sustituirá por la fuente predeterminada.

## Uso de fuentes personalizadas

Puede definir las opciones en el menú desplegable de fuentes configurando el parámetro `customFontFamily` para `UniverSheetsCorePreset` (modo preestablecido) o `UniverUIPlugin` (modo complemento).

#### Plugin Mode

```typescript
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  customFontFamily: {
    list: [
      {
        value: 'PingFang SC',
        label: '苹方（简）',
        category: 'sans-serif',
      },
      {
        value: 'Helvetica Neue',
        label: 'Helvetica Neue',
        category: 'sans-serif',
      },
    ],
    // Whether to override the default font list, defaults to false
    override: true,
  },
})
```

#### Preset Mode

```typescript
const { univerAPI } = createUniver({
  presets: [
    UniverSheetsCorePreset({
      container: 'app',
      customFontFamily: {
        list: [
          {
            value: 'PingFang SC',
            label: '苹方（简）',
            category: 'sans-serif',
          },
          {
            value: 'Helvetica Neue',
            label: 'Helvetica Neue',
            category: 'sans-serif',
          },
        ],
        // Whether to override the default font list, defaults to false
        override: true,
      },
    }),
  ],
})
```

### API de Facade

Además de la configuración durante la inicialización, también puede registrar dinámicamente nuevas fuentes en tiempo de ejecución mediante la API de fachada. Esto es muy útil en escenarios donde los recursos de fuentes deben cargarse de forma asincrónica.

```typescript
univerAPI.addFonts([{
  value: 'PingFang SC',
  label: 'PingFang SC',
  category: 'sans-serif',
}, {
  value: 'Helvetica Neue',
  label: 'Helvetica Neue',
  category: 'sans-serif',
}])
```