> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: selectFont()

## Article: selectFont()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/editor/inputs/select-font.md

## Article Content:

# selectFont()

Opens a font picker panel in the editor, prompting the user to select a font. This function is intended for use in the [settings panel](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/create-a-settings-panel-for-a-site-widget-or-plugin-wix-cli-and-self-hosting.md) of a site widget or plugin implemented with a custom element.

## Syntax

```js
function selectFont(value: FontPickerValue, options: { onChange: (value: FontPickerValue) => void }): Promise<FontPickerValue>
```

## Parameters

| Name     | Type                               | Description                  |
|:---------|:-----------------------------------|:-----------------------------|
| `value` | [FontPickerValue](#fontpickervalue-object) | Optional. Value of the associated `font` and `text-decoration` CSS shorthand properties. |
| `options` | [SelectFontOptions](#selectfontoptions-object) | Optional. Options to use when opening the font picker panel. |

### FontPickerValue object

```ts
{
    font: string;
    textDecoration: string;
}
```

| Name | Type | Description |
|---|---|---|
| `font` | `string` | Value of the associated [`font` CSS shorthand property](https://developer.mozilla.org/en-US/docs/Web/CSS/font), which can include the following:<ul><li>Font family</li><li>Font size</li><li>Font weight</li><li>Font style. Supports `italic` only.</li></ul> |
| `textDecoration` | `string` | Optional. Value of the associated [`text-decoration` CSS shorthand property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration). Can also be `undefined`. |

### SelectFontOptions object

```ts
{
    onChange: (value: FontPickerValue) => void
}
```

| Name | Type | Description |
|---|---|---|
| `onChange` | Function | Optional. Callback function invoked when the font selection changes. It receives the updated `FontPickerValue` as a parameter. |

## Returns

`Promise<FontPickerValue>`

The font selected by the user.

## Example

```js
import { editor, inputs } from "@wix/editor";
import { createClient } from "@wix/sdk";

const client = createClient({
  host: editor.host(),
  modules: { inputs },
});

async function selectFont(font) {
  const response = await client.inputs.selectFont(font, {
    onChange: (value) => {
      console.log("New font: ", value);
    },
  });
}
```