I’m using a custom font with 3 weights (450, 500 & 550).
I’m using these in my paywalls, and they display properly in the Paywall Editor and in my iOS and Android app.
On the web, (@revenuecat/purchases-js 1.39.1) it’s not as great. The 500 font doesn’t really show up different than the 450. Font-weight is good if I inspect it but visually it’s not right.
Wondering if it could be related to that specific font, or it’s a web SDK issue?
Thank you.
Solved
Web SDK doesn't publish my custom fonts
+2Best answer by guilherme
Hey @JFBeaulieu, thanks for reporting back!
Nice to see the weights are rendering correctly now. And agreed, with Default, Selected and Offer states on each package it is easy for one weight to only live in an override and slip through. It’s flexible, but it does have that trade-off.
On the strikethrough, that one points to a known issue in the version you mentioned (1.39.1). In that release the paywall's CSS reset applied sans-serif directly to every element inside the paywall, which overrode the font inherited by the tags our markdown produces, like `<s>`, `<b>`, `<i>` and links.
This was fixed in the paywall UI package back in July, so updating revenuecat/purchases-js to the latest release (anything from 1.47.2 onward includes it) should sort it without any changes to your paywall config.
But do let me know how it shows for you then! Happy to follow through with the team with this.
This post has been closed for comments
+6Hey
On web, our SDK does not have the font installed locally like the native apps might. It only gets the specific font files our backend includes with the paywall, and the browser then renders each text with the closest weight it actually received. That is a bit different from the editor, which has every uploaded file available, so a mismatch between the two usually points to one of the weights not making it to the browser.
We've seen cases where the cause was a weight that is only set on a state override (for example the selected package state, through Rules) and not on any text component in its default state. In that setup the file for that weight is not included for Web, so the browser falls back to the nearest one it has - this is a current limitation, which the team is currently looking into improving though!
A workaround here, for the time being, is to also select the font explicitly in that override, or use that same weight on at least one text component in its default state, then republish.
It is also worth double checking in the font modal in the paywall editor (the gear icon next to the font family) that a separate file exists for every weight you use on this paywall, including the regular 400 one and the in-between ones like 450:
The available font weights in the paywall editor will be determined by the weights you upload for each font family, so be sure to upload each font weight you wish to use on your paywall.
more context here: Custom Fonts
A quick way to confirm what the browser is really using is to:
- inspect the text in DevTools
- under Computed (tab) scroll to Rendered Fonts.
- check the actual font file being drawn (which can differ from the weight in the CSS when the exact file is not available)
Feel free to send a screenshot of those when you have them too, so we can take a second look on our side too!
+2Hi Gui!
Thanks for you answer. I’m not sure exactly how it fixed itself, but it’s working now.
I suspect the default state might not have one of the weight present and I changed that in the meantime. As there is Selected and Default states for Packages, and also Default and Offers’ states, it’s not always easy to check all of them.
My fonts are well loaded in the modal, and everything was working somehow good on mobile.
The only other bug I’ve come across now is that when using a <s>strike<s> on a text inside a textfield, it renders as ‘sans-serif’ font-family instead of my defined font. Seems like inline style on the span isn’t cascading properly over to the included <s> tag inside it. Screenshot included.
Thank you.
+6Hey @JFBeaulieu, thanks for reporting back!
Nice to see the weights are rendering correctly now. And agreed, with Default, Selected and Offer states on each package it is easy for one weight to only live in an override and slip through. It’s flexible, but it does have that trade-off.
On the strikethrough, that one points to a known issue in the version you mentioned (1.39.1). In that release the paywall's CSS reset applied sans-serif directly to every element inside the paywall, which overrode the font inherited by the tags our markdown produces, like `<s>`, `<b>`, `<i>` and links.
This was fixed in the paywall UI package back in July, so updating revenuecat/purchases-js to the latest release (anything from 1.47.2 onward includes it) should sort it without any changes to your paywall config.
But do let me know how it shows for you then! Happy to follow through with the team with this.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.