Developers

Search

How to style bold text color in CMS formatted text

This guide shows you how to customize the color of bold text within your CMS formatted text fields.

Currently, CMS formatted text fields don’t support directly changing the color of bold text. However, you can use one of these two methods.

Using text styles

You can create custom text styles instead of using default bold formatting. This allows full control over color and font weight:

  1. Go to the Assets panel, and then scroll down to Styles.

  2. Create or repurpose a heading style (e.g., h4, h5, h6) with your desired color and weight.

  3. Apply this custom style to your text within the formatted text field.

Note: This approach affects the entire paragraph and can’t be used for individual words within the paragraph.

Using custom CSS

If you prefer to keep the default bold formatting and change color only for specific words or phrases within the paragraph, use custom CSS:

  1. Highlight the text you want bold and press ⌘ + B (Mac) or Ctrl + B (Windows).

  2. Insert the following CSS into the custom code section of your page (inside the <head> tag):

<style>
.framer-text strong {
  color: #0099FF; /* Replace with your preferred color */
}
</style>
<style>
.framer-text strong {
  color: #0099FF; /* Replace with your preferred color */
}
</style>
<style>
.framer-text strong {
  color: #0099FF; /* Replace with your preferred color */
}
</style>

This changes the color of all bold text within CMS formatted text fields on that specific page. To apply this style across your entire site, add the same CSS under Site settings, in the Custom code section.

For additional help, please reach out to Framer support via our contact page.

FAQ

Lesson FAQ

  • How can I change the color of bold text in CMS formatted text fields in Framer?

    Currently, CMS formatted text fields don’t support directly changing the color of bold text. However, you can use custom CSS to change the color of bold text. Insert the following CSS into the custom code section of your page (inside the <head> tag): <style> .framer-text strong { color: #0099FF; /* Replace with your preferred color */ } </style> This will change the color of all bold text within CMS formatted text fields on that specific page. To apply this style across your entire site, add the same CSS under Site settings, in the Custom code section.

  • Is it possible to style only specific bold words or phrases with a different color in a CMS formatted text field?

    Yes, to change the color of only specific bold words or phrases within a paragraph, use the default bold formatting (highlight the text and press ⌘ + B on Mac or Ctrl + B on Windows), then apply custom CSS as described. This method will affect all bold text on the page or site, so for more granular control, you may need to use additional CSS selectors.

  • Can I use text styles to change the color of bold text in CMS formatted text fields?

    You can create custom text styles instead of using default bold formatting. Go to the Assets panel, scroll down to Styles, and create or repurpose a heading style (e.g., h4, h5, h6) with your desired color and weight. Apply this custom style to your text within the formatted text field. Note: This approach affects the entire paragraph and can’t be used for individual words within the paragraph.

Updated