> 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-forms/design/typography-and-controls.md).

# Typography & controls

Choose the typeface of your Dapta Form (nine built-in fonts or your own .woff2 file) and shape its controls: corner radius, button style, full-width button and the progress indicator (Bar, Dots, Count

Two cards in the Design panel decide how the form feels to use: **Typography** sets the typeface, and **Shape and controls** sets corners, buttons and how progress is shown. All of them update the live preview as you click.

***

**Step 1:** Open your form, stay on **Build**, click **Design** in the toolbar and scroll to the **Typography** card.

***

**Step 2:** Open the **Typeface** list and pick a font. The list is grouped into **Sans**, **Serif** and **Your own**. Every built-in font is served by Dapta Forms itself, so the public form loads nothing from an outside font service.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-91de32d483ab37b057c990f40927208e7ea46164%2Fforms-typography-and-controls-01-typeface-list.png?alt=media" alt="The Typeface list open, grouped into Sans (Figtree, Poppins, Inter, DM Sans, Space Grotesk, Manrope, Work Sans), Serif (Fraunces, Playfair Display) and Your own"><figcaption><p>The typeface list. Each option is drawn in its own font. <strong>Fraunces</strong> is selected here.</p></figcaption></figure>

| Group        | Typefaces                                                                                                 |
| ------------ | --------------------------------------------------------------------------------------------------------- |
| **Sans**     | **Figtree** (default), **Poppins**, **Inter**, **DM Sans**, **Space Grotesk**, **Manrope**, **Work Sans** |
| **Serif**    | **Fraunces**, **Playfair Display**                                                                        |
| **Your own** | A font file you host yourself (see Step 3)                                                                |

***

**Step 3:** To use a brand font that is not in the list, choose **Your own**. Two fields appear: **Font name** (the family name, for example Söhne) and **Font file URL (.woff2)** (a public link to the font file). Both fields are required; until both are filled, the form keeps using the default typeface.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-0a7119800597b0519bcf263c194c1336a2d09099%2Fforms-typography-and-controls-02-your-own-font.png?alt=media" alt="Typeface set to Your own, showing the Font name and Font file URL (.woff2) fields"><figcaption><p>Host the .woff2 file yourself and paste its link. Both fields are required.</p></figcaption></figure>

> **💡 Tip:** Make sure the font file is reachable from any browser (a public URL, no login) and that your license allows web use. If the file cannot be loaded, respondents see the default typeface.

***

**Step 4:** Scroll to the **Shape and controls** card and set the four controls. The preview on the right shows the result on the current screen.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-8f5d77f65edc01a78470a810161bb1a39aec8d94%2Fforms-typography-and-controls-03-shape-and-controls.png?alt=media" alt="The Shape and controls card with Corners set to Round, Button set to Outline, Full-width button on and Progress set to Dots; the preview shows an outlined Next button and dots above the question"><figcaption><p><strong>Round</strong> corners, an <strong>Outline</strong> button and <strong>Dots</strong> progress, reflected in the preview.</p></figcaption></figure>

| Control               | Options                                    | What it changes                                                                                                                                                                                                                          |
| --------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Corners**           | **Sharp**, **Soft**, **Round**             | The corner radius of inputs, option cards, buttons and the question card.                                                                                                                                                                |
| **Button**            | **Solid**, **Outline**, **Soft**           | **Solid** fills the button with the accent color. **Outline** draws an accent border with a transparent inside. **Soft** uses a light tint of the accent.                                                                                |
| **Full-width button** | On / off                                   | On (the default): the **Next**, **Submit** and **Start** buttons stretch across the content width. Off: they size to their label. On phones narrower than 480 px the button is always full width.                                        |
| **Progress**          | **Bar**, **Dots**, **Counter**, **Hidden** | How far along the respondent is. **Bar** is a thin line that fills up, **Dots** shows one dot per question, **Counter** shows "Step 2 of 6", **Hidden** removes the indicator from the screen (it is still announced to screen readers). |

> **⚠️ Note:** **Progress** only applies to the **Slides** layout. On a **One page** form every question is on the same screen, so the control is not shown.

> **💡 Tip:** The **Label on button** contrast readout in the **Colors** card only appears while **Button** is **Solid**: with **Outline** or **Soft** the label sits on the form background, which the **Text on background** readout already covers.

***

**Step 5:** Click **Publish** and open the live form to check the result on a real device.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-8caa14ab1d6d4b592416fe49c73ad750ca11da53%2Fforms-typography-and-controls-04-public-round-outline-dots.png?alt=media" alt="The published form on desktop using the Fraunces typeface, round corners, an outlined full-width Next button and dots as the progress indicator"><figcaption><p>The published form: serif typeface, round corners, outline button and dots progress.</p></figcaption></figure>

## What's next

* [Themes, colors & background](/dapta-forms/design/themes-colors-background.md): the palette behind these controls.
* [Logos, layout & transitions](/dapta-forms/design/logos-layout-transitions.md): logo, alignment, width and how steps move.
* [Brand kit (workspace-wide)](/dapta-forms/design/brand-kit.md): set a default typeface and controls for every new form.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.