maverickdoge_api

[valid raptor]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1354818657255030905

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

• maverickdoge_connect-onboarding, 2 days ago, 6 messages

[ember creek]

so like this buts its still using the default

[orchid wolf]

What do you mean by still using the default? Those colors seem to match your defined appearance.

[ember creek]

I only mean the font

the rest is working as expected

[broken trench]

👋 stepping in here

If you use a different value, like https://fonts.googleapis.com/css?family=Open+Sans from our example, does that work?

[ember creek]

still, that dosen't work

[broken trench]

Okay give me a minute to repro

[ember creek]

no problem

[left eagle]

Hi @ember creek 👋 I've been helping look into this. I believe the problem here is that the custom font isn't being referenced from within appearance.variables once it's imported.

Can you try setting appearance.variables.fontFamily to match the family of the custom font you're loading?

Here's what I had to use to get this to work in my testing:

      // This is your test publishable API key.
      publishableKey: "pk_test_123",
      fetchClientSecret: fetchClientSecret,
      fonts: [
        {cssSrc: 'https://fonts.googleapis.com/css?family=Bytesized'},
      ],
      appearance: {
      // See all possible variables below
      overlays: "dialog",
      variables: {
        fontFamily: 'Bytesized',
      },
    },
  });```
<https://docs.stripe.com/connect/get-started-connect-embedded-components?platform=web#customize-the-look-of-connect-embedded-components>

[ember creek]

hi, I had tried that previously before and now again but still its the same default font

[left eagle]

Can you share that code? Do you have a publicly accessible test page that you can share where we can look at what you're seeing?

[ember creek]

https://crow-precious-thoroughly.ngrok-free.app

email: [e-mail]

pw: Knax.imam7

u have to go to "payouts" to see it

[left eagle]

I think the fontFamily value for that font is Open Sans (with a space), based on what I saw in testing when retrieving that font:

I also had a hard time distinguishing that font from the default when I was testing with it.

That's why I switched to the Bitesized one for testing since it was more apparent when it was working.

[ember creek]

so like that?

[left eagle]

I don't think you need to specify fonts.family, but yeah, the appearance.variables.fontFamily value looks right now.

[ember creek]

still seeing the same default font

[left eagle]

We may use Open Sans by default 😅

I'm not sure about that

[ember creek]

actually I want to user Inter-latin which is used across the whole app, just using open sans here since its provided like this in the docs

but really wierd issue

[left eagle]

Can you try with the font you want to use, I think it's going to be more obvious with a font other than the one we use in our docs.

[ember creek]

tried that, unfortunately still same issue

[left eagle]

Can you share the code for that? Is that what the test site you shared is trying to use now?

[ember creek]

of course

[left eagle]

Is there anything that would prevent me from rendering your test site in Safari? I was able to pull it up in Chrome, but I'm hitting an error in Safari.

[ember creek]

try again, it should work now

[left eagle]

Hm, it strikes me as odd that I don't see any requests being made to googleapis when I visit that page.

[ember creek]

Hmm thats weird, i have not changed the code I had sent above. The url is also correct i made a request to it

[left eagle]

Even more weird, now sometimes I do see them, sometimes I see requests somewhere else:

Are you using Next or a similar framework here?

I'm wondering if some of this is trying to be handled server-side and that isn't being handled well.

[ember creek]

yes I am using next js, but actually importing the component dynamically, so completely disabling the ssr

[finite coyote]

Hi 👋

I"m stepping in as my colleague needs to go.

I'm a little confused as I see a number of different appearance api parameters.

The most recent one I see in this thread is specifying the Inter font family.

And when I look at the fonts applied to Payouts table, I see this

[ember creek]

yes I am supplying the the font with the url but as u can see in the test version it not rendering it

it still showing the default font

[finite coyote]

I am looking at the ngrok website

Where are you not seeing this font rendered?

[ember creek]

at the same webseite or in the local host

or are u able to see it?

it should be the same font as the once used across the whole apllication

[finite coyote]

I see the font family I shared being applied in the Payouts element

I'm looking here: https://crow-precious-thoroughly.ngrok-free.app/payouts

And the <span> I highlighted is in the center of the payout element

[ember creek]

I know what u are trying to say and when inspecting the browser i can see it too being applied. But there is no like visual change

[finite coyote]

The font inside the payout element clearly has serifs and the font outside it does not

[ember creek]

yes exactly the font eventhough applied to the table is not visual

it using the same fallback font as if no font is provided

in the docs when u dont apply a valid font it will show the same

[finite coyote]

Okay. One thing I notice when remaining on this page for a period of time is the payout element appears to periodically re-render. Is it possible there is some React hook that is re-triggering the rendering and not passing the font parameters?

[ember creek]

U can take a look, this is the whole component, actually it just getting the "stripeConnectInstance" only once, but maybe if the cached state of the "createAccountSession" is expired it may refetch new new "stripeConnectInstance"

so thats maybe why u are seeing the refresh

[finite coyote]

Yeah I generally dislike and refuse to learn React so I wouldn't be able to identify what might be causing that error.

Can you try having just the fonts:{ cssSrc} and then appearance.variables.fontFamily? Also what about trying a more dramatic font family?

[ember creek]

let me try some options, it may help