Cannot fully customize fonts in Checkout using checkoutBrandingUpsert GraphQL mutation

Retired Boards Appdev Functions

Topic summary

Customization of Checkout fonts via the Admin GraphQL checkoutBrandingUpsert mutation works for primary and secondary typography (base and bold weights), using uploaded Shopify asset fonts.

Issue: At the payment step, custom payment method names are rendered in bold, and there is no apparent field in the mutation to control that specific font weight.

A Shopify staff member noted it might not be changeable via the API and escalated the question to the checkout development team for guidance.

The original poster requested updates twice; no further response or solution has been provided yet. The discussion remains open with the key question unanswered.

Artifacts: A code snippet illustrating the mutation structure and a screenshot showing the bold payment method text were provided, supporting the issue description.

Summarized with AI on January 11. AI used: gpt-5.
1

Hi,

I would like to use custom fonts in the new Checkout UI.

I uploaded those fonts as assets in Shopify.

Then I used them to define the primary and secondary fonts of my Checkout using the following mutation :

(doc : https://shopify.dev/docs/api/admin-graphql/2023-10/mutations/checkoutBrandingUpsert)

mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
  checkoutBrandingUpsert(
    checkoutBrandingInput: $checkoutBrandingInput
    checkoutProfileId: $checkoutProfileId
  ) {
    checkoutBranding {
      designSystem {
        typography {
          primary {
            base {
              sources
              weight
            }
            bold {
              sources
              weight
            }
            name
          }
          secondary {
            base {
              sources
              weight
            }
            bold {
              sources
              weight
            }
            name
          }
        }
      }
    }
    userErrors {
      code
      field
      message
    }
  }
}

It works, but at the payment step, the name of our custom payment means show up in bold, and I can’t find anywhere to customize the font weight specifically to them in my mutation (see screenshot below).

Does anyone know how to do this by any chance please ?

Screenshot 2023-11-17 at 09.56.21.png
Screenshot 2023-11-17 at 09.56.21.png1169×917 88 KB

2

Hi Needfortri,

There might not be a way to directly change this behavior via the API but I’ve asked our checkout dev team if they have any advice on this!

1 Like
3

Hi @Liam , thanks for your feedback !
Looking forward :slightly_smiling_face:

4

Hi @Liam ! Did you get any news on this topic by any chance please ?