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 in a user's design.

Our design guidelines help you create a high-quality app that easily passes app review.

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.

import { Button, Rows, Text } from "@canva/app-ui-kit";
import { requestFontSelection } from "@canva/asset";
import * as React from "react";
import styles from "styles/components.css";
export function App() {
async function handleClick() {
const fontResponse = await requestFontSelection();
console.log(fontResponse);
}
return (
<div className={styles.scrollContainer}>
<Rows spacing="1u">
<Button variant="primary" onClick={requestFontSelection}>
Open font picker
</Button>
</Rows>
</div>
);
}
tsx

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:

import { Button, Rows, Text } from "@canva/app-ui-kit";
import { Font, requestFontSelection } from "@canva/asset";
import * as React from "react";
import styles from "styles/components.css";
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.`;
async function handleClick() {
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}>
Select a font
</Button>
</Rows>
</div>
);
}
tsx

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.

import { addNativeElement } from "@canva/design";
await addNativeElement({
type: "text",
children: ["Hello world"],
fontRef: selectedFont?.ref,
});
tsx

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.

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

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.

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

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.

import { findFonts } from "@canva/asset";
const { fonts } = await findFonts({ fontRefs: ["font_ref_goes_here"] });
console.log(fonts); // => [ { name: "Arial", ... }]
tsx
  • Apps can't access Canva 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.