thread Support for CSS font-family via fontFamily is incomplete in Archived Discussions (Read Only)

Support for CSS font-family via fontFamily is incomplete

stevepiercy — Tue, 07 Feb 2017 21:23:42 GMT

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

Re: Support for CSS font-family via fontFamily is incomplete

EJ_ — Sat, 20 Aug 2016 20:56:31 GMT

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.

Re: Support for CSS font-family via fontFamily is incomplete

stevepiercy — Fri, 26 Aug 2016 00:15:02 GMT

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/