如何更改 Square 支付表单的字体答案

【问题标题】：How to change font of Square payment form如何更改 Square 支付表单的字体
【发布时间】：2017-05-05 02:23:24
【问题描述】：

我正在尝试初始化方形支付表单并更改输入字段的字体。当使用像 serif 这样的浏览器默认值时，此参数正确呈现，但是当尝试使用 Google 字体时，我收到以下错误：

Uncaught Error: Invalid InputStyle value `Roboto` for property `fontFamily`.
See: https://docs.connect.squareup.com/articles/adding-payment-form/#stylingcardform
    at Object.styleStringForKeyValuePair (https://connect.squareup.com/v2/iframe?type=cardNumber:31:30543)
    at Object.<anonymous> (https://connect.squareup.com/v2/iframe?type=cardNumber:31:29754)
    at Array.forEach (native)
    at Object.styleStringForStyleObject (https://connect.squareup.com/v2/iframe?type=cardNumber:31:29677)
    at Object.buildStylesForScreenWidth (https://connect.squareup.com/v2/iframe?type=cardNumber:31:29578)
    at s.buildStylesForScreenWidth (https://connect.squareup.com/v2/iframe?type=cardNumber:31:16470)
    at new s (https://connect.squareup.com/v2/iframe?type=cardNumber:31:15723)
    at s (https://connect.squareup.com/v2/iframe?type=cardNumber:31:9536)
    at r (https://connect.squareup.com/v2/iframe?type=cardNumber:31:9919)
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

inputStyles: [{
  fontFamily: 'Roboto',
}],

// more initialization parameters

代码模板来自https://docs.connect.squareup.com/articles/adding-payment-form

是否可以使用导入的字体作为输入样式？

【问题讨论】：

虽然这可能不是您的问题的原因，但 webfonts 是异步下载的，因此您完全有可能需要等待它完成，使用字体加载器。

标签： javascript fonts square square-connect

【解决方案1】：

目前您无法在付款表单中使用自定义字体。这是 Square 正在研究的问题，尤其是使用 Google 字体。

【讨论】：

啊，真可惜。你有支持的字体列表吗？还是 Google 字体支持的时间表？
另外，textAlign: 'center' 将是一个很棒的补充。
感谢您对我的 Square 问题的所有帮助 :)。