> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Font

> The `Font` control allows you select a `fontFamily`, `fontStyle`, and `fontWeight`.

The `Font` control allows you select a `fontFamily`, `fontStyle`, and `fontWeight`.

![Font control component in Makeswift Visual Builder](/_fern-img/86dfcc3bfaa28707ab06fe987f33b9b19c173f8315eb455b8b370fc99355aba0.webp)

## Params

**`label`** `string`

Text for the panel label in the Makeswift Visual Builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`variant`** `boolean` — default: true

A boolean to determine whether `fontStyle` and `fontWeight` are included in
the final value. This value changes what panel inputs are shown in the
Makeswift builder, and changes the type of defaultValue.

---

**`defaultValue`** `object` — default: false

The default value passed to your component when no value is available. This
object includes three properties:

* `fontFamily` - `string`
* `fontStyle` - `"normal" | "italic"`
* `fontWeight` - `number`

Without `defaultValue` the data passed to your component is optional.

### Example

```ts
defaultValue: {
  fontFamily: 'var(--font-grenze-gotisch)',
  fontStyle: 'italic',
  fontWeight: 700,
},
```

---

## Prop type

The `Font` control passes an object with the following properties:

```ts
{
  fontFamily: string;
  fontStyle: string;
  fontWeight: number;
}
```