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

I have a font I'm using all around my webpage, and I want to get Stripe Elements to match the style. I've added the font as a CSS source in the config, but it errors out, and tells me it has an invalid character. I suspect it's the ~ in the actual font file URL, as it's not present in any of the font URLs that do work. There doesn't seem to be any info on this error either, as searching for it yields no results. The development is currently being done locally, but will be pushed to a server at some point. Stripe currently has problems loading local fonts, as they have to be served over HTTPS. Is there any way, other than using something like ngrok to get the font to load?

Also, I'm not sure if this is important, but here the URL for the font is. It's called Lexend. https://fonts.gstatic.com/s/lexend/v7/~CggKBkxleGVuZBAHIAUqAggA.woff2

And the error

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

CodePudding user response：

You should switch to using the cssSrc approach and the google font source URL using this pattern:

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

Check this out here: https://jsfiddle.net/5yz4z2yn/104/ You can replace Indie Flower with Lexend in all 3 places to see it work.