How can I add more fonts to my checkout page?

[uixpioneer]

I would like to add more fonts for the checkout page for us to match it with the website

The choices there is so limited compat

[vian_FoxEcom]

Hi @uixpioneer

Vian from FoxEcom here. Here’s my advice for you:

1. First, download the font and convert it to woff2 format

2. In your Shopify Admin, choose the theme > Edit code > Assets folder > Upload that font

3. Add it to base.css or style.scss or theme.css of theme.scss.

4. Then you can use it for any element

Here are the tools

• To browse for new fonts: https://freefontsfamily.com/ and https://www.cufonfonts.com/

• To convert the font file to woff2: https://cloudconvert.com/otf-to-woff2

Hope this helps

[codexa174]

Great step by step solution! Just worth adding that after uploading your woff2 font to Shopify Assets you should always define a proper CSS font stack with fallback fonts like Arial or sans-serif as backup, ensuring your checkout page text stays readable and on-brand even for users whose browsers or devices have any trouble loading the custom font file.