mintlify__docs/es/customize/fonts.mdx

---
title: "Fuentes"
description: "Personaliza la tipografía de tu sitio de documentación con Google Fonts o fuentes autoalojadas para encabezados, cuerpo de texto y bloques de código."
keywords: ["Google Fonts", "fuentes locales", "tipografía personalizada"]
boost: 3
---

Configura una fuente personalizada para todo el sitio o por separado para los encabezados y el cuerpo del texto. Usa Google Fonts, archivos de fuentes locales o fuentes alojadas externamente. La fuente predeterminada varía según el tema.

Configura las fuentes con la [propiedad fonts](/es/organize/settings-appearance#fonts) en tu `docs.json`.

<div id="google-fonts">
  ## Google Fonts
</div>

Mintlify carga automáticamente [Google Fonts](https://fonts.google.com) cuando especificas una familia tipográfica en tu `docs.json`.

```json docs.json
"fonts": {
  "family": "Inter"
}
```

<div id="local-fonts">
  ## Fuentes locales
</div>

Para usar fuentes locales, coloca los archivos de fuente en el directorio de tu proyecto y refiérelos en la configuración de `docs.json`.

<div id="setting-up-local-fonts">
  ### Configurar fuentes locales
</div>

<Steps>
  <Step title="Agregar archivos de fuentes a tu proyecto">
    Por ejemplo, crea un directorio `fonts` y agrega tus archivos de fuentes:

    ```text
    your-project/
    ├── fonts/
    │   ├── InterDisplay-Regular.woff2
    │   └── InterDisplay-Bold.woff2
    ├── docs.json
    └── ...
    ```
  </Step>

  <Step title="Configurar las fuentes en docs.json">
    Hace referencia a tus fuentes locales usando rutas relativas desde la raíz de tu proyecto:

    ```json docs.json
    {
      "fonts": {
        "family": "InterDisplay",
        "source": "/fonts/InterDisplay-Regular.woff2",
        "format": "woff2",
        "weight": 400
      }
    }
    ```
  </Step>
</Steps>

<div id="local-fonts-for-headings-and-body">
  ### Fuentes locales para títulos y cuerpo
</div>

Configura fuentes locales por separado para los títulos y el texto del cuerpo en tu `docs.json`:

```json docs.json
{
  "fonts": {
    "heading": {
      "family": "InterDisplay",
      "source": "/fonts/InterDisplay-Bold.woff2",
      "format": "woff2",
      "weight": 700
    },
    "body": {
      "family": "InterDisplay",
      "source": "/fonts/InterDisplay-Regular.woff2",
      "format": "woff2",
      "weight": 400
    }
  }
}
```

<div id="externally-hosted-fonts">
  ## Fuentes alojadas externamente
</div>

Utiliza fuentes alojadas externamente haciendo referencia a la URL de la fuente en tu `docs.json`:

```json docs.json
{
  "fonts": {
    "family": "Hubot Sans",
    "source": "https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2",
    "format": "woff2",
    "weight": 400
  }
}
```

<div id="font-configuration-reference">
  ## Referencia de configuración de tipografías
</div>

<ResponseField name="fonts" type="object">
  Configuración de tipografías para tu documentación.

  <Expandable title="Tipografías">
    <ResponseField name="family" type="string" required>
      Nombre de la familia tipográfica, como "Inter" o "Playfair Display."
    </ResponseField>

    <ResponseField name="weight" type="number">
      Grosor de la tipografía, como 400 o 700. Las tipografías variables admiten grosores precisos como 550.
    </ResponseField>

    <ResponseField name="source" type="string (uri)">
      URL de la fuente tipográfica, como `https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2`, o ruta a tu archivo de tipografía local, como `/assets/fonts/InterDisplay.woff2`. Google Fonts se cargan automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no necesitas una URL de source.
    </ResponseField>

    <ResponseField name="format" type="'woff' | 'woff2'">
      Formato del archivo de tipografía. Obligatorio cuando se usa el campo `source`.
    </ResponseField>

    <ResponseField name="heading" type="object">
      Anula la configuración de tipografía específicamente para los encabezados.

      <Expandable title="Encabezado">
        <ResponseField name="family" type="string" required>
          Nombre de la familia tipográfica para los encabezados.
        </ResponseField>

        <ResponseField name="weight" type="number">
          Grosor de la tipografía para los encabezados.
        </ResponseField>

        <ResponseField name="source" type="string (uri)">
          URL de la fuente tipográfica, como `https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2`, o ruta a tu archivo de tipografía local para los encabezados. Google Fonts se cargan automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no necesitas una URL de source.
        </ResponseField>

        <ResponseField name="format" type="'woff' | 'woff2'">
          Formato del archivo de tipografía para los encabezados. Obligatorio cuando se usa el campo `source`.
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="body" type="object">
      Anula la configuración de tipografía específicamente para el texto del cuerpo.

      <Expandable title="Cuerpo">
        <ResponseField name="family" type="string" required>
          Nombre de la familia tipográfica para el texto del cuerpo.
        </ResponseField>

        <ResponseField name="weight" type="number">
          Grosor de la tipografía para el texto del cuerpo.
        </ResponseField>

        <ResponseField name="source" type="string (uri)">
          URL de la fuente tipográfica, como `https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2`, o ruta a tu archivo de tipografía local para el texto del cuerpo. Google Fonts se cargan automáticamente cuando especificas un nombre de `family` de Google Fonts, por lo que no necesitas una URL de source.
        </ResponseField>

        <ResponseField name="format" type="'woff' | 'woff2'">
          Formato del archivo de tipografía para el texto del cuerpo. Obligatorio cuando se usa el campo `source`.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>