Text emphasis="bold" doesnt work on Firefox

[sov-brandstaetter]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions-react": "2024.4.1"

Describe the bug

When using Some Text the text has a font-weight of 500. On chrome this looks bold but on firefox it looks the same as regular text

Steps to reproduce the behavior:

import { Text } from "@shopify/ui-extensions-react/checkout";
<Text emphasis="bold">Some Text</Text>

Expected behavior

The text should be bold on firefox as well

Screenshots

On Chrome it works:

On Firefox it doesnt:

[simontaisne]

Hey @sov-brandstaetter, could you share your Firefox version? I wasn't able to reproduce the issue on the latest 126.0 version.

[sov-brandstaetter]

hey @simontaisne I tried it with 126 and 125.0.3 (on Windows 10) and on both versions its the same.

• using incognito mode with no extensions
• using the default font:

This is my checkout UI code to reproduce it: ` const orderDetailsBlock = reactExtension( "customer-account.order-status.block.render", () => ( <>

test

  <Text>test</Text>
</>

) ); export { orderDetailsBlock }; `

And this is the output:

[simontaisne]

Thanks for letting us know, @sov-brandstaetter. It looks like this issue is specific to Windows. We're looking into it.

[simontaisne]

The issue should now be fixed 👍 Let us know if you're still seeing anything off.

[sov-brandstaetter]

Amazing it works now 👍