Font Setup in shopify forms app.

Shopify Apps
1

I’ve uploaded a .woff file of the LouizeDisplay font to my Shopify store, and it worked well—the font displayed correctly across the site. However, after installing and updating Shopify Forms, the font no longer appears as expected in the form section. There’s also no option to select LouizeDisplay in the Shopify Forms font settings. I’m sharing a screenshot so you can see the difference.

2

Shopify Forms content lives inside Shadow DOM, so none of the CSS rules in your document apply to the form.

One way is to use Javascript code to push your rules into adoptedStylesheets inside this Shadow DOM.

Or you can piggy-back to the way App uses to pass styles into Form.

Create a “Custom liquid” section before your “Shopify Forms” app embed section and paste code like this:

You can see it working in my test store here https://sysftke9y30mzhvt-23104437.shopifypreview.com (at the bottom)