> ## 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.

# Using fonts

How to use fonts when creating or updating text.

Canva has an expansive library of fonts. Apps can access and use a limited subset of these fonts when [creating or updating text](https://www.canva.dev/docs/apps/creating-text/) in a user's design.

## Feature and surface support considerations

The font picker works within different [Canva design types](https://www.canva.dev/docs/apps/designs/#design-types), such Presentations and Docs.

## Open font picker

Apps can open a font picker that lets users choose a font from Canva's library. This offers a familiar and consistent user experience, and it's how we recommend most apps implement a font selection interface.

```tsx
import { Button, Rows } from "@canva/app-ui-kit";
import { requestFontSelection } from "@canva/asset";
import * as React from "react";
import * as styles from "styles/components.css";
import { useFeatureSupport } from "@canva/app-hooks";

export function App() {

  const isSupported = useFeatureSupport();

  async function handleClick() {
    const fontResponse = await requestFontSelection();
    if (isSupported(requestFontSelection)) {
    console.log(fontResponse);
    return;
   }
  }

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="1u">
        <Button
          variant="primary"
          onClick={handleClick}
          disabled={!isSupported(requestFontSelection)}
          >
          Open font picker
        </Button>
      </Rows>
    </div>
  );
}
```

## Remember font selection

When a user selects a font, we recommend storing that font in a state object. This has a few benefits:

1. You can update the UI to display the selected font.
2. You can access the selected font at other points in the lifecycle (e.g. when creating a text element).
3. You can pass the selected font into the font picker, so the user's selection is remembered.

For example:

```tsx
import { Button, Rows, Text } from "@canva/app-ui-kit";
import { Font, requestFontSelection } from "@canva/asset";
import * as React from "react";
import * as styles from "styles/components.css";
import { useFeatureSupport } from "@canva/app-hooks";

export function App() {
  // Keep track of the currently selected font
  const [selectedFont, setSelectedFont] = React.useState<Font | undefined>();

  const message = selectedFont
    ? `The selected font is ${selectedFont.name}.`
    : `There is no font selected.`;

  const isSupported = useFeatureSupport();

  async function handleClick() {
    if (isSupported(requestFontSelection)) {
    const fontResponse = await requestFontSelection({
      selectedFontRef: selectedFont?.ref, // Specify the selected font, if one is defined
    });

    if (fontResponse.type !== "completed") {
      return;
    }
  }

    // Update the currently selected font
    setSelectedFont(fontResponse.font);
  }

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="1u">
        <Text>{message}</Text>
        <Button
          variant="primary"
          onClick={handleClick}
          disabled={!isSupported(requestFontSelection)}
          >
          Select a font
        </Button>
      </Rows>
    </div>
  );
}
```

## Use selected font

When a user selects a font, the app receives an *asset reference* for that font. To use the font, this reference can be passed into methods that accept a `fontRef` property.

```tsx
import { addElementAtPoint } from "@canva/design";

await addElementAtPoint({
  type: "text",
  children: ["Hello world"],
  fontRef: selectedFont?.ref,
});
```

## Render font preview

All fonts have an associate image that contains a preview of the font. Apps can render this image to help users identify the currently selected font or to create a custom font picker.

```tsx
<div>{selectedFont && <img src={selectedFont.previewUrl} />}</div>
```

## Get list of recommended fonts

If the built-in font picker is not suitable for whatever reason, an app can alternatively:

1. Request a list of recommended fonts from Canva.
2. Create a custom user interface that renders those fonts.

The recommendations themselves are based on various factors, such as the user's locale.

```tsx
import { findFonts } from "@canva/asset";
const { fonts } = await findFonts();
console.log(fonts); // => [ { name: "Arial", ... }]
```

**Note:** We only recommend this option if it's strictly required for the app's use-case.

## Get specific font details

An app can use a font's asset reference to get additional information about that font. Just keep in mind that asset references are short-lived and should only be used soon after the app receives them.

```tsx
import { findFonts } from "@canva/asset";
const { fonts } = await findFonts({ fontRefs: ["font_ref_goes_here"] });
console.log(fonts); // => [ { name: "Arial", ... }]
```

## Gotchas

* Apps can't access [Canva Pro](https://www.canva.com/pro/) fonts.
* Apps can't upload or otherwise define custom fonts.
* Apps can't download the underlying font files.
* Apps can only set the font of paragraphs, not of inline text.

## API reference

* [`findFonts`](https://www.canva.dev/docs/apps/api/latest/asset-find-fonts/)
* [`requestFontSelection`](https://www.canva.dev/docs/apps/api/latest/asset-request-font-selection/)