Buy Button Font Customization (Shopify Starter)

[figmentbranding]

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!

[PageFly-Noah]

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

[AcidPi]

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.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tiny5" media="all">

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