Google Font URL被Stripe拦截加载失败，如何让Stripe支持该字体加载？

问题根因 #

你的猜测是正确的，Stripe Elements的字体配置对URL特殊字符有严格校验，未编码的~属于非法字符，触发了校验规则。

修复方案 #

1. 优先处理URL编码（成本最低，直接生效） #

将字体URL中所有的~替换为URL编码值%7E，你提供的补充信息中已经有编码后的合法地址，直接替换现有配置中的URL即可通过校验：
替换前（报错）：
https://fonts.gstatic.com/s/lexend/v7/~ChUKBkxleGVuZDoLCPTQnbsHFQAAlkMQByAFKgIIAA==.woff2
替换后（合法）：
https://fonts.gstatic.com/s/lexend/v7/%7EChUKBkxleGVuZDoLCPTQnbsHFQAAlkMQByAFKgIIAA==.woff2

2. 本地开发无需ngrok的替代方案 #

Stripe仅要求字体资源通过HTTPS加载，不需要公网可访问，以下方案都可以满足要求：

• 本地部署HTTPS静态服务：使用mkcert生成本地受信任的SSL证书，将Lexend字体文件下载到本地项目中，通过本地HTTPS服务（如开启HTTPS模式的Vite、Webpack DevServer）加载，地址格式为https://localhost:端口/本地字体路径.woff2，Stripe信任localhost的HTTPS资源。
• 使用Google Fonts官方标准化CDN地址：不要直接用gstatic的直链，引入Lexend字体官方CDN对应的已编码字体源地址，官方地址默认已经做了特殊字符编码，同时天然支持HTTPS，本地和线上环境都可以直接使用。
• 字体转Base64内嵌：将需要的Lexend字体文件转成Base64编码，直接填写到Stripe字体配置的src字段中，完全绕开URL校验和外部资源加载限制，适合本地开发快速调试使用。

注意事项 #

Stripe Elements仅支持woff、woff2格式的字体，配置前确认字体格式符合要求，编码后可以再检查URL中是否存在其他未编码的特殊字符（如空格、中文等），避免二次报错。

内容的提问来源于stack exchange，提问作者R3FL3CT