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.
Question
Web SDK doesn't publish my custom fonts
+2
+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!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.