Google 字体 URL 导致 Stripe 阻止该字体。我怎样才能让 Stripe 接受它？

Question

我在我的网页中使用了一种字体，并且我希望使用条纹元素来匹配该样式。我在配置中将字体添加为 CSS 源，但它出错了，并告诉我它有一个无效字符。我怀疑它是实际字体文件 URL 中的 ~，因为它不存在于任何有效的字体 URL 中。似乎也没有关于此错误的任何信息，因为搜索它不会产生任何结果。目前正在本地进行开发，但会在某个时候推送到服务器。 Stripe 目前在加载本地字体时遇到问题，因为它们必须通过 HTTPS 提供。除了使用 ngrok 之类的东西来加载字体之外，还有什么办法吗？

此外，我不确定这是否重要，但这里的字体 URL 很重要。它叫做 Lexend。 https://fonts.gstatic.com/s/lexend/v7/~CggKBkxleGVuZBAHIAUqAggA.woff2

错误

Invalid src value in font configuration value: https://fonts.gstatic.com/s/lexend/v7/~ChUKBkxleGVuZDoLCPTQnbsHFQAAlkMQByAFKgIIAA==.woff2. This value contains invalid characters.

Answer 1

您应该切换到使用 cssSrc 方法和 google 字体源 URL 使用此模式：

var elements = stripe.elements({
  fonts: [
    {cssSrc: 'https://fonts.googleapis.com/css?family=Lexend'}
  ],
});

在这里查看：https://jsfiddle.net/5yz4z2yn/104/ 您可以在所有 3 个地方将 Indie+Flower 替换为 Lexend 以查看它是否有效。

Answer 2

原来要加载字体，你必须使用 HTTPS。起初我怀疑这一点，但我不确定。

Google 字体 URL 导致 Stripe 阻止该字体。我怎样才能让 Stripe 接受它？

Google Font URL is causing Stripe to block the font. How can I get Stripe to accept it?

css

fonts

stripe-payments