> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-docs-es/dforms/design/typography-and-controls.md).

# Tipografía y controles

Elige la tipografía de tu formulario de dForms (nueve fuentes incluidas o la tuya en .woff2) y dale forma a sus controles: radio de las esquinas, estilo de botón, botón de ancho completo y el indicado

Dos tarjetas del panel de Diseño deciden cómo se siente usar el formulario: **Tipografía** define la fuente, y **Forma y controles** define esquinas, botones y cómo se muestra el progreso. Todas actualizan la vista previa en vivo según haces clic.

***

**Paso 1:** Abre tu formulario, abre la pestaña **Diseño** y baja hasta la tarjeta **Tipografía**.

***

**Paso 2:** Abre la lista **Tipografía** y elige una fuente. La lista está agrupada en **Sans**, **Serif** y **La tuya**. Todas las fuentes incluidas las sirve dForms, así que el formulario público no carga nada de un servicio de fuentes externo.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-0e71478ffd977dd683f010bff0535bf5c97c6c58%2Fforms-typography-and-controls-01-typeface-list.png?alt=media" alt="La lista de Tipografía abierta, agrupada en Sans (Figtree, Poppins, Inter, DM Sans, Space Grotesk, Manrope, Work Sans), Serif (Fraunces, Playfair Display) y La tuya"><figcaption><p>La lista de tipografías. Cada opción se dibuja con su propia fuente. Aquí está seleccionada <strong>Fraunces</strong>.</p></figcaption></figure>

| Grupo       | Tipografías                                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------------------- |
| **Sans**    | **Figtree** (por defecto), **Poppins**, **Inter**, **DM Sans**, **Space Grotesk**, **Manrope**, **Work Sans** |
| **Serif**   | **Fraunces**, **Playfair Display**                                                                            |
| **La tuya** | Un archivo de fuente que alojas tú (mira el Paso 3)                                                           |

***

**Paso 3:** Para usar una fuente de marca que no está en la lista, elige **La tuya**. Aparecen dos campos: **Nombre de la fuente** (el nombre de la familia, por ejemplo Söhne) y **URL del archivo de fuente (.woff2)** (un enlace público al archivo). Los dos campos son obligatorios; hasta que llenes ambos, el formulario sigue usando la tipografía por defecto.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-3fb1f55f5bcb0ef203a149666c8c8511d59dae97%2Fforms-typography-and-controls-02-your-own-font.png?alt=media" alt="Tipografía puesta en La tuya, mostrando los campos Nombre de la fuente y URL del archivo de fuente (.woff2)"><figcaption><p>Aloja tú el archivo .woff2 y pega su enlace. Los dos campos son obligatorios.</p></figcaption></figure>

> **💡 Tip:** Asegúrate de que el archivo de fuente sea alcanzable desde cualquier navegador (una URL pública, sin login) y de que tu licencia permita el uso web. Si el archivo no se puede cargar, quien responde ve la tipografía por defecto.

***

**Paso 4:** Baja a la tarjeta **Forma y controles** y define los cuatro controles. La vista previa de la derecha muestra el resultado en la pantalla actual.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-b3dd963ccd1a14ff742daa36ca4efd697cc72e9d%2Fforms-typography-and-controls-03-shape-and-controls.png?alt=media" alt="La tarjeta Forma y controles con Esquinas en Redondas, Botón en Contorno, Botón de ancho completo activado y Progreso en Puntos; la vista previa muestra un botón Siguiente con contorno y puntos sobre la pregunta"><figcaption><p>Esquinas <strong>Redondas</strong>, botón de <strong>Contorno</strong> y progreso de <strong>Puntos</strong>, reflejados en la vista previa.</p></figcaption></figure>

| Control                     | Opciones                                        | Qué cambia                                                                                                                                                                                                                                                                                                                                                                                             |
| --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Esquinas**                | **Rectas**, **Suaves**, **Redondas**            | El radio de las esquinas de los campos, las tarjetas de opción, los botones y la tarjeta de pregunta.                                                                                                                                                                                                                                                                                                  |
| **Botón**                   | **Sólido**, **Contorno**, **Suave**             | **Sólido** rellena el botón con el color de acento. **Contorno** dibuja un borde de acento con el interior transparente. **Suave** usa un tinte claro del acento.                                                                                                                                                                                                                                      |
| **Botón de ancho completo** | Activado / desactivado                          | Activado (por defecto): los botones **Siguiente**, **Enviar** y **Comenzar** se estiran a todo el ancho del contenido. Desactivado: se ajustan a su etiqueta. En teléfonos de menos de 480 px el botón siempre va a ancho completo.                                                                                                                                                                    |
| **Progreso**                | **Barra**, **Puntos**, **Contador**, **Oculto** | Cuánto lleva avanzado quien responde, contado en pantallas: una pregunta por pantalla, salvo que [agrupes preguntas en una pantalla](/dapta-docs-es/dforms/builder/screens.md). **Barra** es una línea fina que se llena, **Puntos** muestra un punto por pantalla, **Contador** muestra «Paso 2 de 6», **Oculto** quita el indicador de la pantalla (se sigue anunciando a los lectores de pantalla). |

> **⚠️ Nota:** **Progreso** solo aplica al diseño **Diapositivas**. En un formulario de **Una página** todas las preguntas están en la misma pantalla, así que el control no se muestra.

> **💡 Tip:** El indicador de contraste **Texto del botón** de la tarjeta **Colores** solo aparece mientras **Botón** está en **Sólido**: con **Contorno** o **Suave** la etiqueta va sobre el fondo del formulario, que ya cubre el indicador **Texto sobre fondo**.

***

**Paso 5:** Haz clic en **Publicar** y abre el formulario en vivo para comprobar el resultado en un dispositivo real.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-1684a2b5d03d8fb361eeb95bdab337bd2f57f3d4%2Fforms-typography-and-controls-04-public-round-outline-dots.png?alt=media" alt="El formulario publicado en escritorio usando la tipografía Fraunces, esquinas redondas, un botón Siguiente de contorno a ancho completo y puntos como indicador de progreso"><figcaption><p>El formulario publicado: tipografía serif, esquinas redondas, botón de contorno y progreso de puntos.</p></figcaption></figure>

## Qué sigue

* [Temas, colores y fondo](/dapta-docs-es/dforms/design/themes-colors-background.md): la paleta detrás de estos controles.
* [Logos, distribución y transiciones](/dapta-docs-es/dforms/design/logos-layout-transitions.md): logo, alineación, ancho y cómo se mueven los pasos.
* [Kit de marca (para todo el workspace)](/dapta-docs-es/dforms/design/brand-kit.md): define una tipografía y unos controles por defecto para cada formulario nuevo.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.dapta.ai/dapta-docs-es/dforms/design/typography-and-controls.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.