Buy Button Font Customization (Shopify Starter)

Technical Q&A
1

Hi there, I am looking to change the font of my embeddable Buy Button to a custom font (from Adobe Fonts) to match the rest of my Wordpress website, where the buy button will be going.

I have followed a short tutorial online to replace the font using code, but I am not having any luck. Wondering if anyone has a solution to this, or if I will just have to use one of the default fonts that are listed when creating the Buy Button.

Any help with this would be much appreciated!

2

This is Noah from PageFly - Shopify Page Builder App

Hi @figmentbranding I can help you. Please can you provide the website url (and password if have). Thank you.

Best regards,

Noah | PageFly

3

Hi,

The buy button is in an iframe, modifying the content within iframe wont be possible as you will get “Permission denied to access property document on cross-origin object”, however you can modify the generated embed code to use a Google Font not listed in the available fonts, don’t know of a way to use Adobe Fonts…

When setting up the button pick a Google Font for example “Roboto”, your generated code will now have the following.

"googleFonts": [
      "Roboto"
    ]

Update googleFonts value.

"googleFonts": [
      "Tiny5"
    ]

Update font-family.

"button": {
        "font-family": "Tiny5, sans-serif",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }

The iframe content will now include font and style the button.

Capture button.PNG

There are several places googleFonts and font-family are listed in the embed code, update the first ones after options: { for the button text, or do all of them if you want everything updated to use new font.

Regards