Inter font downloaded but not applied

[amoser67]

Issue summary

It seems that the "Inter" font is being downloaded as expected (https://cdn.shopify.com/static/fonts/inter/v4/InterVariable.woff2?v=4.0), but when I adjust the Polaris sans-serif font family variable from "Inter, -apple-system, ..., sans-serif" to "Inter", all text on the page defaults to a serif font.

I first noticed this because only normal and bold font weights were working, even when using the "medium" or "semibold" values for the fontWeight property of the Text component, making me suspect the Inter font wasn't being applied as expected.

My conclusion is that the Inter font is not being used, so I wanted to reach out and see if this was a known issue, and/or if others were able to replicate the issue.

For reference, I have been using Polaris to build out an app using the Remix app template for the past several months, and everything else seems to be working as expected.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 12.10.0
• Browser: Chrome, Version 121.0.6167.85 (Official Build) (64-bit)
• Device: Desktop
• Operating System: Ubuntu

[sam-b-rose]

Hi @amoser67! Thanks for reporting this issue.

How are you specifying the @font-face rule in your CSS? It should look something like this: https://cdn.shopify.com/static/fonts/inter/v4/styles.css

[amoser67]

Hi Sam, thanks for the response.

I think I may have figured out my issue. I saw that the Inter font was being downloaded, but I think that was just from the Shopify admin, rather than the app iframe. So I added

<link
    rel="stylesheet"
    href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"
/>

to my /routes/app.tsx and that seems to have resolved the issue. It shows the Inter font being downloaded twice now in the network tab of chrome dev tools, but I am assuming that is just because both the Shopify admin and the app iframe both need the font.

If this sounds correct to you, then I think we can close this issue.

[sam-b-rose]

Yes, that sounds correct to me! Thanks for verifying, @amoser67 👍

I think the browser will load it from cache even in the iframe since the source is the same. Conditions will vary depending on the user's browser and settings, but that seems like the best solution for now 😄

[aaronccasanova]

For reference, I have been using Polaris to build out an app using the Remix app template [...]
So I added [...] to my /routes/app.tsx and that seems to have resolved the issue.

@amoser67 Double confirming this is the correct fix and noting we have since updated the Remix template 🚀