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

# Typography & controls

Choose the typeface of your dForms 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, Coun

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, open the **Design** tab 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 dForms 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-cfba67cca28ef23e9afabd3ad2cb0363184babb0%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-d04b6d13a6c581171f24cdf138854d157c7d7904%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-dc9bd74eeb1bd9d8373dd09035151cea3a08633e%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, counted in screens: one question per screen, unless you [group questions on one screen](/dforms/builder/screens.md). **Bar** is a thin line that fills up, **Dots** shows one dot per screen, **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-741627a5917640f5ff7fad93112554d7cef25faa%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](/dforms/design/themes-colors-background.md): the palette behind these controls.
* [Logos, layout & transitions](/dforms/design/logos-layout-transitions.md): logo, alignment, width and how steps move.
* [Brand kit (workspace-wide)](/dforms/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 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/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.