How can I properly style the text in an embedded HTML element to achieve a lighter font weight and apply a specific class to my h2 headings in Webflow?

Published on
September 22, 2023

To properly style the text in an embedded HTML element and achieve a lighter font weight in Webflow, you can follow these steps:

  1. Locate the embedded HTML element on your Webflow page. This is typically done by selecting the element and checking for the custom code or embed code option in the settings panel.

  2. Open the embedded HTML element and look for the HTML tag that wraps the text you want to style. It could be a <p> tag for paragraphs, an <h1> tag for headings, or any other relevant tag.

  3. Add custom inline CSS styles to the HTML tag to achieve the desired font weight. For example, if you want to make the text lighter, you can add the font-weight: lighter; style to the tag.

  4. Save your changes and preview the page to see the updated styling of the text in the embedded HTML element.

To apply a specific class to your h2 headings in Webflow, you can follow these steps:

  1. Select the h2 heading element on your Webflow page by clicking on it.

  2. In the settings panel, you will find the "Class" field. Click on the "+ Create New Class" button next to it.

  3. Enter a name for your class in the "Class Name" field that appears. Make sure it accurately describes the purpose of the class, such as "custom-h2" or "lighter-h2".

  4. Click on the "Create" button to create the class.

  5. With the class created, you can now add custom styles to this specific class, such as font-size, color, font-weight, or any other relevant properties.

  6. Save your changes and preview the page to see the updated styling applied to your h2 headings with the specific class.

With these steps, you can easily style the text in an embedded HTML element to achieve a lighter font weight and apply a specific class to your h2 headings in Webflow.

Additional Questions:

  1. How do I change the font family in Webflow?
  2. Can I add custom CSS code to my Webflow project?
  3. Is it possible to create custom animations in Webflow?