> Shopify Plus:
> Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.
Unique typefaces and other typography customizations enable merchants to showcase their brand’s personality and style, and help to create a cohesive experience across the storefront and checkout.
This guide explains how to modify checkout typography using the GraphQL Admin API's checkout branding types and their associated fields. You'll define and use typography tokens within the design system for various elements, and style other elements directly. You'll learn some sample customizations, but you can use what you've learned to make other typography customizations.
> Tip:
> You can reset styles to their defaults by writing parent fields to `null` with the GraphQL Admin API. Refer to examples of resetting [some](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_color_schemes_to_the_defaults) and [all](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_all_styling_to_defaults) values to the defaults.
## What you'll learn
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
## Requirements
- The store that you're modifying must be on a [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan).
- You've created a new [development store](/docs/api/development-stores#create-a-development-store-to-test-your-app) with the [Checkout and Customer Accounts Extensibility developer preview enabled](/docs/api/developer-previews#enable-a-developer-preview).
- You can make [authenticated requests](/docs/api/admin-graphql#authentication) to the GraphQL Admin API.
- You've either [installed the GraphiQL app](https://shopify-graphiql-app.shopifycloud.com/login) on your store or [created an app](/docs/apps/build/scaffold-app), with the `read_checkout_branding_settings` and `write_checkout_branding_settings` [access scopes](/docs/api/usage/access-scopes).
- You're using API version `2023-10` or higher.
- You're familiar with the [GraphQL Admin API's branding types](/docs/apps/build/checkout/styling#data-structures).
- Custom fonts must be in either [Web Open Font Format](https://en.wikipedia.org/wiki/Web_Open_Font_Format) (WOFF) or [WOFF2](https://www.w3.org/TR/WOFF2/).
- To use licensed fonts legally, stores must have a webfont license.
## Step 1: Retrieve the store's published checkout profile ID
Checkout styling properties apply to a [checkout profile ID](/docs/apps/build/checkout/styling#checkout-profile). In this step, you'll retrieve the checkout profile to which you'll apply typography changes.
1. Query [`checkoutProfiles`](/docs/api/admin-graphql/latest/queries/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.
## Step 2: Update the base size and ratio for the design system
> Note:
> Modifying the base font size and ratio proportionally adjusts associated spacing values, such as margins and padding. This ensures that relative size and space are preserved.
In this step, you'll use the [`checkoutBrandingUpsert`](/docs/api/admin-graphql/latest/mutations/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`:
## Step 3: Apply a Shopify font to primary surfaces
Primary surfaces include text and buttons.
Set the base font for primary surfaces with the [`checkoutBrandingUpsert`](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation. You'll use a selection from the [Shopify font library](/docs/storefronts/themes/architecture/settings/fonts#shopify-font-library):
## Step 4: Apply a custom font to secondary surfaces
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](/docs/apps/build/online-store/asset-legacy)
- Through the [Files](https://shopify.com/admin/content/files) section of the Shopify admin.
2. Retrieve the ID of the generic file using the [files query](/docs/api/admin-graphql/latest/queries/files#section-examples). The following is an example:
3. Update the [`checkoutBrandingUpsert`](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation with the typography data using the [`CheckoutBrandingTypographyInput`](/docs/api/admin-graphql/latest/input-objects/CheckoutBrandingTypographyInput) input object.
Replace `YOUR_FILE_ID_HERE` with the ID of your uploaded font file.
> Tip:
> Fonts are a separate resource that need to be downloaded by the browser before any text is rendered, which impacts the checkout’s overall performance. To optimize the checkout for performance, consider using a [system font](/docs/storefronts/themes/architecture/settings/fonts#system-fonts) or a font from the [Shopify font library](/docs/storefronts/themes/architecture/settings/fonts#shopify-font-library) rather than a custom font.
>
> To avoid long font load times impacting the checkout experience, use the [`loadingStrategy`](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) property to set how a font face is displayed based on whether and when it's downloaded and ready to use. To learn more, refer to the MDN documentation of the [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) descriptor.
## Step 5: Style buttons with the secondary font
Now you'll update the primary button typography to match what you set for `secondary` surfaces, using the [`checkoutBrandingUpsert`](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation's `customizations` object:
## Step 6: Style level one headings
Now you'll use the [`checkoutBrandingUpsert`](/docs/api/admin-graphql/latest/mutations/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](#step-2-update-the-base-size-and-ratio-for-the-design-system), in uppercase and bold:
## Next steps
- Explore the [GraphQL Admin API](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) to learn more about customizing checkout's typography.
