Buy Button Font Customization (Shopify Starter)

Buy Button Font Customization (Shopify Starter)

figmentbranding
Shopify Partner
1 0 0

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!

Replies 2 (2)

PageFly-Noah
Shopify Partner
1317 233 268

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

AcidPi
Shopify Partner
60 14 16

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">

 

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