How can I change the color of bold text in a Webflow template to stay white instead of turning black?

Published on

September 22, 2023

To change the color of bold text in a Webflow template and ensure it stays white instead of turning black, you can follow these steps:

Select the text element that contains the bold text you want to change the color of.
Open the Styles panel on the right-hand side of the Webflow Designer.
In the Typography section, locate the "Font Color" property.
By default, the "Font Color" property is set to "Inherit," which means it will inherit the color from its parent element. To override this and set a specific color, click the colored square next to the property.
In the color picker that appears, select the desired color for your bold text. In this case, choose white.
To ensure that the bold text remains white even when it is bolded, locate the "Bold" property in the Typography section and toggle it on.
If your bold text is still turning black, it may be because of a more specific CSS rule that is overriding the color you set. In that case, you can use a more specific selector to target the bold text and apply the desired color.

You can add a class to the text element that contains the bold text and then target that class in the Styles panel. Apply the desired color to the class.
Another option is to use a custom CSS rule. Click on the gear icon at the top of the Styles panel, select "Add Custom Code," and add a CSS rule that targets the bold text and sets the color to white. For example, you can use the following code:

.bold-text {  color: white !important;}

By following these steps, you can change the color of bold text in a Webflow template to stay white and prevent it from turning black.

Additional questions: