> 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: selectFontWeight()

## Article: selectFontWeight()

## Article Link: https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-font-weight.md

## Article Content:

<!-- Source: packages/public-editor-platform-sdk/src/element/index.ts in wix-private/editor-platform -->
# selectFontWeight()

Opens the editor's font weight picker for the selected component, letting a Wix user choose a weight for a given font family.

## Syntax

```ts
function selectFontWeight(params: SelectFontWeightParams): Promise<IFontWeight>
```

## Parameters

`params` accepts one of the following shapes:

- [Manifest key](#manifest-key)
- [Explicit options](#explicit-options)

For more information on this choice, see [Picker arguments](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md#picker-arguments).

### Manifest key

Connects the picker to one or more manifest style fields, so the selected weight saves automatically.

| Name | Type | Description |
| :---- | :---- | :---- |
| `fontFamilyStyleItemKey` | string | Key of the manifest style field that stores the font family. Pass together with `fontWeightStyleItemKey`. |
| `fontWeightStyleItemKey` | string | Key of the manifest style field that stores the font weight. Pass together with `fontFamilyStyleItemKey`. |

Or, if a single field stores both:

| Name | Type | Description |
| :---- | :---- | :---- |
| `fontStyleItemKey` | string | Key of the manifest style field that stores the combined font shorthand. |

### Explicit options

Opens the picker without connecting it to the manifest. Use the callback to apply the selected weight yourself.

| Name | Type | Description |
| :---- | :---- | :---- |
| `fontFamily` | object | Font family to filter the available weights by, as `{ family, weight }`. Omit to show all weights. |
| `target` | HTMLElement | Element in your panel that the picker popup opens relative to. |
| `onChange` | function | Called with the selected weight. |

## Returns

`Promise<IFontWeight>`

The selected weight.

## Example

```js
import { reactElements } from '@wix/editor';

const weight = await reactElements.selectFontWeight({
  fontFamily: { family: 'Arial', weight: '400' },
  target: buttonRef.current,
  onChange: (value) => {
    reactElements.setStyles({ cssProperties: { fontWeight: value.weight } });
  },
});
```

## See also

- [selectFont()](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-font.md)
- [selectFontFamily()](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/pickers/select-font-family.md)
- [setStyles()](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/styles/set-styles.md)
- [About the React Elements API](https://dev.wix.com/docs/sdk/host-modules/editor/react-elements/introduction.md)