Support for CSS font-family via fontFamily is incomplete

[stevepiercy]

It appears that support for CSS font-family attributes via the fontFamily property is incomplete. The following does not work and returns an error in the javascript console.

    inputStyles: [
      {
        fontSize: '16px',
        fontFamily: 'Helvetica, Arial, san-serif',
        color: 'rgb(10, 10, 10)'
      }
    ],

Error:

Uncaught Error: Invalid InputStyle value `Helvetica, Arial, san-serif` for property `fontFamily`.
See: https://docs.connect.squareup.com/articles/adding-payment-form/#stylingcardform

The link to the documentation does not provide sufficient information for how to use multiple font faces.

Using a single font-family works, but is not very robust.

 inputStyles: [
{
fontSize: '16px',
fontFamily: 'Helvetica',
color: 'rgb(10, 10, 10)'
}
],

Ideally the property should support standard CSS font-family syntax, where font faces can have spaces and quotation marks, and be separated by commas:

font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif

[EJ_]

Hi there!

Hopefully another seller can help out here, but you can always reach out to our Support Team and we can get you in touch with one of our API Specialists. 

[stevepiercy · Accepted solution]

This works:

fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',

From Support:

The payment form currently supports only web safe fonts. Roboto is not a so-called web font. Removing Roboto from the list works correctly. See a list of web safe fonts at http://www.cssfontstack.com/