requestFontSelection

API reference for the requestFontSelection method.

This version of the API is deprecated. This version will soon be unsupported. You should use a stable version of the API in your app.

Opens a dialog that allows the user to select from a list of fonts.

To learn more, see Creating text.

Usage

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

const fontResponse = await requestFontSelection();
console.log(fontResponse.font.name); // => "Arial"

Parameters

requestobjectOptional

The options for requesting the selection of a font.

request.selectedFontRefstringOptional

A unique identifier that references a font asset in Canva's backend. If this is set, the specified font will be selected when the font picker opens. To learn more, see Creating text.

Returns

A Promise that resolves with an object.

If the user selects a font, the following object is returned:

responseobjectRequired

The result of selecting a font.

response.typestringRequired

The type of result. If the user selects a font, this is always "COMPLETED".

response.fontobjectRequired

The selected font.

response.font.refstringRequired

A unique identifier that references a font in Canva's backend.

You should not rely on the ref remaining the same. For example, if you store it in a database and try to use it a few weeks later, an error may be thrown due to the ref being outdated.

response.font.namestringRequired

The name of the font.

response.font.weightsarrayRequired

An array of font weights that the font is available in.

response.font.weights[0]objectRequired

An individual font weight.

response.font.weights[0].weightstringRequired

The name of the font weight.

The possible values depend on the font, but may be any combination of the following values:

"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"

response.font.weights[0].stylesarrayRequired

The styles the font weight is available in.

The possible values depend on the font, but may be any combination of the following values:

"normal"
"italic"

response.font.previewUrlstringOptional

The URL of an image that contains a preview of the font.

If the user closes the font picker without selecting a font, the following object is returned:

responseobjectRequired

The result of closing the font picker without selecting a font.

response.typestringRequired

The type of result. If the user doesn't select a font, this is always "ABORTED".