> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Font

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

<Frame type="glass">
  <img src="https://mintcdn.com/makeswift/pZUQIXY0VZyiTaM2/images/controls/font/header.jpeg?fit=max&auto=format&n=pZUQIXY0VZyiTaM2&q=85&s=7af7bc5251cd21a50d67e82c5b701ae2" alt="Font control component in Makeswift Visual Builder" width="1690" height="786" data-path="images/controls/font/header.jpeg" />
</Frame>

## Params

<ParamField query="label" type="string">
  Text for the panel label in the Makeswift Visual Builder.
</ParamField>

<ParamField query="description" type="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).
</ParamField>

<ParamField query="variant" type="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.
</ParamField>

<ParamField query="defaultValue" type="object" default="false">
  <p>The default value passed to your component when no value is available. This
  object includes three properties: </p>

  <ul>
    <li>`fontFamily` - `string`</li>
    <li>`fontStyle` - `"normal" | "italic"`</li>
    <li>`fontWeight` - `number`</li>
  </ul>

  <p>Without `defaultValue` the data passed to your component is optional.</p>

  ### Example

  ```ts theme={null}
  defaultValue: {
    fontFamily: 'var(--font-grenze-gotisch)',
    fontStyle: 'italic',
    fontWeight: 700,
  },
  ```
</ParamField>

## Prop type

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

```ts theme={null}
{
  fontFamily: string;
  fontStyle: string;
  fontWeight: number;
}
```