I’ve been customizing a Shopify Plus store’s checkout using the Shopify GraphQL editor. As part of this I’ve tried adding custom fonts to a Shopify Plus following the directions here: https://shopify.dev/docs/apps/build/checkout/styling/customize-typography
The fonts aren’t actually showing up when I follow these directions – although the GraphQL output shows that the fonts are working, when I go to the checkout preview the default Shopify system fonts are still in use. All the other customizations I’ve put in are working, so this makes me wonder if customFontGroup is broken right now? The query and variables I’m using are below:
mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
checkoutBrandingUpsert(
checkoutBrandingInput: $checkoutBrandingInput
checkoutProfileId: $checkoutProfileId
) {
checkoutBranding {
designSystem {
typography {
secondary {
base {
sources
}
bold {
sources
}
name
}
primary {
base {
sources
}
bold {
sources
}
name
}
}
}
}
userErrors {
field
message
}
}
}
And Variables here (removed specific profile/file ids):
{
"checkoutProfileId":"gid://shopify/CheckoutProfile/[id]",
"checkoutBrandingInput" :{
"designSystem":{
"typography": {
"primary": {
"customFontGroup": {
"base": {
"genericFileId": "gid://shopify/GenericFile/[id]",
"weight": 400
},
"bold": {
"genericFileId": "gid://shopify/GenericFile/[id]",
"weight": 400
}
}
},
"secondary": {
"customFontGroup": {
"base": {
"genericFileId": "gid://shopify/GenericFile/[id]",
"weight": 400
},
"bold": {
"genericFileId": "gid://shopify/GenericFile/[id]",
"weight": 400
}
}
},
"size": {
"base": 12,
"ratio": 1.4
}
},
"colors": {
"schemes": {
"scheme1": {
"base": {
"background": "#ffffff"
}
},
"scheme2": {
"base": {
"background": "#fafafa"
}
}
}
}
},
"customizations": {
"content": {
"divider": {
"visibility": "HIDDEN"
}
},
"header": {
"padding": "NONE"
},
"main": {
"colorScheme": "COLOR_SCHEME1"
},
"orderSummary": {
"colorScheme": "COLOR_SCHEME2"
},
"divider": {
"borderWidth": "BASE"
},
"control": {
"cornerRadius": "NONE"
},
"select": {
"typography": {
"font": "PRIMARY"
}
},
"primaryButton": {
"cornerRadius": "NONE",
"inlinePadding": "TIGHT",
"typography": {
"font": "PRIMARY",
"letterCase": "UPPER"
}
},
"secondaryButton": {
"cornerRadius": "NONE",
"inlinePadding": "TIGHT",
"typography": {
"font": "PRIMARY",
"letterCase": "UPPER"
}
},
"headingLevel1": {
"typography": {
"font": "SECONDARY"
}
},
"headingLevel2": {
"typography": {
"font": "SECONDARY"
}
}
}
}
}