Legacy Knowledge Base
Published Jun. 30, 2025

Font-weight is not being responsive on Heading Fragment

Written By

Adrienne Lao

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack" publication program, made available for informational purposes. Articles in this program were published without a requirement for independent editing or verification and are provided"as is" without guarantee.

Before using any information from this article, independently verify its suitability for your situation and project.

Issue

  • Despite setting the font weight for the Heading Fragment, the fragment is unresponsive and doesn't respond to the applied setting. 

Environment

  • DXP 7.4

Resolution

  • This is determined to be the intended behavior. This is because some common styles don't work with all the fragments due to how the styles are applied. Styles are applied to an outer div surrounding the fragment. Since the H1 has its font weight provided by the user agent stylesheet it doesn't use the value provided by the parent div. 
  • There are a couple of workarounds that exist that can still help you achieve your end goal of changing the font weight.
  • This can be fixed by either providing a more specific css targeting on the advanced stylesheet like:
    .[$FRAGMENT_CLASS$] h1 { font-weight: 700; }

    or just setting font-weight: inherit and simply style the outer div in the advanced tab like
    .[$FRAGMENT_CLASS$] { font-weight: 700; }
  • However, the correct way to fix this is to clone the heading fragment and include the data-lfr-styles attribute that allows the user to specify where the common styles are applied. More info about this property in the docs: Applying Styles to Fragments.

 

 

Did this article resolve your issue ?

Legacy Knowledge Base