bmerritt - Payment Element Font Issues | Stripe Developers | Page 1

remote wadi Sep 1, 2022, 12:43 AM

#

Hello! When this happens are there any related errors in the Console or Network tabs of the web developer tools?

balmy pendant Sep 1, 2022, 12:48 AM

#

I'm not seeing anything in the Console. In the Network tab, there are some failed requests to r.stripe.com/0, but those don't seem related at first glance. What's particularly interesting is that I do see a successful request for one of the .woff2 files, but I suspect that's from the parent page, not the Stripe <iframe>.

remote wadi Sep 1, 2022, 12:49 AM

#

Hm, interesting. Is this page online where I can take a look?

balmy pendant Sep 1, 2022, 12:52 AM

#

No, unfortunately; it's internal-only at the moment.

remote wadi Sep 1, 2022, 12:52 AM

#

Let me see if I can reproduce, hang on...

#

It works as expected for me on iOS 15.6.1 with this code:

        fonts: [
          { cssSrc: 'https://fonts.googleapis.com/css?family=Open+Sans' }
        ],
        appearance: {
          theme: 'stripe',
          variables: {
            fontFamily: 'Open Sans, monospace',
          },

#

Maybe it has something to do with the internal-only environment?

balmy pendant Sep 1, 2022, 12:58 AM

#

I suppose it's possible, perhaps a CORS thing or something like that, although I'd expect that to affect other platforms as well. Anyway, I'll keep investigating. Thanks for taking the time to check.

remote wadi Sep 1, 2022, 12:59 AM

#

Happy to help, although I'm sorry I couldn't help more. My guess is that it's probably something to do with security; are you using HTTPS internally?

balmy pendant Sep 1, 2022, 1:00 AM

#

Yes, we're using HTTPS.

remote wadi Sep 1, 2022, 1:01 AM

#

Hm, I'm not sure then, especially if there's no errors or console output indicating an issue.

balmy pendant Sep 1, 2022, 1:02 AM

#

Huh, and it just fixed itself on the latest page reload, so it might just be Safari refusing to use the font unless it's got it cached. Might not be respecting font-display: swap.

remote wadi Sep 1, 2022, 1:03 AM

#

Oh, interesting!

balmy pendant Sep 1, 2022, 1:03 AM

#

Although I wouldn't expect that to affect document.fonts. But anyway, I may just chalk this one up to Safari being Safari. Thanks again for taking a look!

#bmerritt - Payment Element Font Issues