How do I apply custom fonts to form headers using CSS?

Store Design
, ,

Topic summary

A user is trying to apply custom fonts (specifically ‘Unbounded’) to Shopify Forms headers but cannot target them with standard CSS methods.

The Problem:

  • Shopify Forms use Web Components (<form-embed>) with encapsulated ShadowDOM
  • Standard CSS targeting doesn’t work due to this encapsulation
  • The form loads asynchronously, making the shadowRoot unavailable immediately

The Solution:
A community member provided a workaround involving:

  • Adding a script to layout/theme.liquid
  • Using a MutationObserver to watch for when the <form-embed> element appears in the DOM
  • Accessing the shadowRoot once available to apply custom styles
  • Using camelCase naming for style attributes when editing the style object

Status: Resolved with a technical solution provided, though implementation requires JavaScript rather than pure CSS.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi guys!

Hoping someone can help me apply our custom fonts to the Shopify Forms Headers - from Inspect tool I can see the attachedbut no idea how to use this info to apply the custom font:

Screenshot 2023-10-18 at 3.03.14 pm.png
Screenshot 2023-10-18 at 3.03.14 pm.png1250×882 200 KB

Trying to customise the Form heading to ''unbounded' just like the other headings
Trying to customise the Form heading to ''unbounded' just like the other headings1796×556 30.6 KB

1 Like
2

were you able to solve this? I can’t target it too using CSS.

3

BUMP!!

1 Like
4

Shopify Forms use Web Components (). This is why the usual styling fixes are not working as it’s encapsulated in a ShadowDOM.
Also, since loads asynchronously and its shadowRoot doesn’t exist right away, you’ll want to observe the DOM for when it appears.
If you open “layout/theme.liquid” and add this script, this will allow you to edit the styles. Do remember that as you’re editing the style object, you’ll need to use the camelCase names for the style attributes.

Hope this helps!
5

I’ve added a solution to style the forms for you. Check my reply above.