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

# requestFontSelection

API reference for the requestFontSelection method.

Opens a font picker.

## Usage

### Open a font picker

```typescript
import { requestFontSelection } from "@canva/asset";

const response = await requestFontSelection();
```

### Open a font picker with a preselected font

```typescript
import { type FontRef, requestFontSelection } from "@canva/asset";

const placeholderFontRef = "PLACEHOLDER_FONT_REF" as FontRef;

const response = await requestFontSelection({
  selectedFontRef: placeholderFontRef
});
```

### Handle font selection response

```typescript
import { requestFontSelection } from "@canva/asset";

const response = await requestFontSelection();

if (response.type === "completed") {
  const { ref, name, weights } = response.font;
} else {
  // Handle selection cancelled if needed
}
```

## Parameters

<Prop.List>
  <Prop name="request" type="FontSelectionRequest" sourceLineNumbers={[846]}>
    Options for configuring a font picker.

    <PillAccordion defaultExpanded={true} title={<>Properties of <strong>request</strong></>}>
      <Prop.List>
        <Prop name="selectedFontRef" type="FontRef" sourceLineNumbers={[347]}>
          The ref of a font to display as selected when the font picker is opened.
        </Prop>
      </Prop.List>
    </PillAccordion>
  </Prop>
</Prop.List>

## Returns

The result of selecting a font from a font picker. This is a `Promise` that resolves with the following object:

<Tabs>
  <Tab name="Completed">
    <Prop.List>
      <Prop name="type" required type="string" sourceLineNumbers={[358]}>
        The type of result.

        The only valid value is `"completed"`.
      </Prop>

      <Prop name="font" required type="Font" sourceLineNumbers={[362]}>
        The selected font.

        <PillAccordion defaultExpanded={false} title={<>Properties of <strong>font</strong></>}>
          <Prop.List>
            <Prop name="ref" required type="FontRef" sourceLineNumbers={[316]}>
              A unique identifier that points to a font asset in Canva's backend.
            </Prop>

            <Prop name="name" required type="string" sourceLineNumbers={[320]}>
              The name of the font.
            </Prop>

            <Prop name="weights" required type="FontWeight[]" sourceLineNumbers={[324]}>
              The available font weights for the font.

              <PillAccordion defaultExpanded={false} title={<>Properties of <strong>weights</strong></>}>
                <Prop.List>
                  <Prop name="weight" required type="FontWeightName" sourceLineNumbers={[384]}>
                    The name of the font weight.

                    <Prop.Extras>
                      **Available values**:

                      * `"normal"`
                      * `"thin"`
                      * `"extralight"`
                      * `"light"`
                      * `"medium"`
                      * `"semibold"`
                      * `"bold"`
                      * `"ultrabold"`
                      * `"heavy"`
                    </Prop.Extras>
                  </Prop>

                  <Prop name="styles" required type="FontStyle[]" sourceLineNumbers={[388]}>
                    The font styles available for this specific font weight.

                    <Prop.Extras>
                      **Available values**:

                      * `"normal"`
                      * `"italic"`
                    </Prop.Extras>
                  </Prop>
                </Prop.List>
              </PillAccordion>
            </Prop>

            <Prop name="previewUrl" type="string" sourceLineNumbers={[328]}>
              The URL of an image that renders a preview of the font.
            </Prop>
          </Prop.List>
        </PillAccordion>
      </Prop>
    </Prop.List>
  </Tab>

  <Tab name="Aborted">
    <Prop.List>
      <Prop name="type" required type="string" sourceLineNumbers={[367]}>
        The type of result.

        The only valid value is `"aborted"`.
      </Prop>
    </Prop.List>
  </Tab>
</Tabs>