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

[ByAprilCo]

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:

[stressedowner]

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

[Hausful]

BUMP!!

[SWilder]

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

[SWilder]

Shopify Forms use Web Components (<form-embed>). This is why the usual styling fixes are not working as it's encapsulated in a ShadowDOM. 
Also, since <form-embed id="app-embed"> 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!

<script>
      // CUSTOM SCRIPT TO STYLE SHOPIFY-FORMS
      function waitForFormEmbedShadowRoot(callback) {
        const checkInterval = 500;
        const maxAttempts = 30;
        let attempts = 0;
      
        const interval = setInterval(() => {
          const formEmbed = document.querySelector('form-embed#app-embed');
      
          if (formEmbed && formEmbed.shadowRoot) {
            clearInterval(interval);
            callback(formEmbed.shadowRoot);
          }
      
          attempts++;
          if (attempts > maxAttempts) {
            clearInterval(interval);
            console.warn('form-embed#app-embed with shadowRoot not found in time');
          }
        }, checkInterval);
      }
      
      
      waitForFormEmbedShadowRoot((shadow) => {
        // Find the H2 elements in the form.
        const headerH2 = shadow.querySelector('h2');
        if (headerH2) { 
          headerH2.style.fontSize = '3rem';
        }
        // Find all paragraphs that are inside divs that classes contain "textBody"
        shadow.querySelectorAll('div[class*="textBody"] p').forEach((el) => {
          el.style.fontSize = "1.6rem";
          el.style.lineHeight = "2.64rem";
        });
      });
    </script>