[SOLVED] How to change typeform button font?

How to change typeform button font?

I have the following typeform embedded in a react project:

import { PopupButton } from '@typeform/embed-react'

const MyComponent = () => {
  return (
    <PopupButton id="<form-id>" style={{ fontSize: 20; fontFamily: "Helvetica" }} className="my-button">
      click to open form in popup
    </PopupButton>
  )
}

However, while the change of font is working for my divs, it's not working with the PopupButton component. How can I change the font "click to open form in popup" contained within?

Solution

PopupButton component will let you change the button CSS via style prop.

In your case you have a typo in the object in style prop, it contains semicolon (;) instead of a colon (,) after fontSize. When you use colon (,) it works:

<PopupButton id="<form-id>" style={{ fontSize: 20, fontFamily: "Helvetica" }} className="my-button">
  click to open form in popup
</PopupButton>

I did a quick test here and it works as expected: https://codesandbox.io/s/charming-shaw-92ber?file=/src/App.js