Customize typography

In this tutorial, you'll learn how to do the following tasks:

• Retrieve a list of your store's checkout profile IDs
• Update the checkout design system typography's base and ratio
• Apply a Shopify font to checkout's text and buttons
• Upload a custom font and apply it to checkout headings
• Customize buttons with a font that's distinct from the text
• Customize checkout's level one headings with case, weight, and size

• The store that you're modifying must be on a Shopify Plus plan.
• You've created a new development store with the Checkout and Customer Accounts Extensibility developer preview enabled.
• You've completed the GraphQL and REST Admin API getting started guide.
• You've either installed the GraphiQL app on your store or created an app, with the read_checkout_branding_settings and write_checkout_branding_settings access scopes.
• You're using API version 2023-10 or higher.

• You're familiar with the GraphQL Admin API's branding types.

• Custom fonts must be in either Web Open Font Format (WOFF) or WOFF2.

• To use licensed fonts legally, stores must have a webfont license.

Checkout styling properties apply to a checkout profile ID. In this step, you'll retrieve the checkout profile to which you'll apply typography changes.

1. Query checkoutProfiles to retrieve a list of checkout profile IDs.

   The is_published parameter indicates which checkout profile is currently applied to your store's live checkout.

2. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

In this step, you'll use the checkoutBrandingUpsert mutation to update the design system's base size. You'll also update the scale ratio that's used to define all font sizes, such as what represents SMALL and LARGE:

Primary surfaces include text and buttons.

Set the base font for primary surfaces with the checkoutBrandingUpsert mutation. You'll use a selection from the Shopify font library:

Secondary surfaces include headings.

In this step, you'll upload a custom font and set it as the base font for headings:

1. Upload the custom font using one of the following methods:
   • Using the Asset API resource
   • Through the Files section of the Shopify admin.

2. Retrieve the ID of the generic file using the files query. The following is an example:

3. Update the checkoutBrandingUpsert mutation with the typography data using the CheckoutBrandingTypographyInput input object.

   Replace YOUR_FILE_ID_HERE with the ID of your uploaded font file.

Now you'll update the primary button typography to match what you set for secondary surfaces, using the checkoutBrandingUpsert mutation's customizations object:

Now you'll use the checkoutBrandingUpsert mutation's customizations object to style the level one heading typography.

The following example sets the font to large, relative to the base size and ratio, in uppercase and bold:

• Explore the GraphQL Admin API to learn more about customizing checkout's typography.