Developers

Search

How to style bold text color in CMS formatted text

Learn how to customize the color of bold text in CMS formatted text fields using text styles or custom CSS.

CMS formatted text fields do not currently support changing the color of bold text directly. However, you can achieve this using custom text styles or custom CSS, depending on your needs.

Use text styles

If you want full control over text color and font weight, create and apply a custom text style instead of using the default bold formatting.

  1. Open the Assets panel.

  2. Scroll to Styles.

  3. Create a new heading style, or repurpose an existing one such as H4, H5, or H6.

  4. Configure the style with your preferred color and font weight.

  5. Apply the style within your CMS formatted text field.

Note: This method applies the style to an entire paragraph. It cannot be used to style individual words or phrases within a paragraph.

Use custom CSS

If you want to keep the default bold formatting and change the color of bold words or phrases, you can use custom CSS.

  1. In the formatted text field, highlight the text you want to make bold.

  2. Press ⌘ + B on Mac or Ctrl + B on Windows.

  3. Add the following code to the page’s custom code section inside the <head> tag:

<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 page.

To apply the same styling across your entire site:

  1. Open Site Settings.

  2. Go to Custom Code.

  3. Add the same CSS to the appropriate code section.

CMS formatted text fields do not currently support changing the color of bold text directly. However, you can achieve this using custom text styles or custom CSS, depending on your needs.

Use text styles

If you want full control over text color and font weight, create and apply a custom text style instead of using the default bold formatting.

  1. Open the Assets panel.

  2. Scroll to Styles.

  3. Create a new heading style, or repurpose an existing one such as H4, H5, or H6.

  4. Configure the style with your preferred color and font weight.

  5. Apply the style within your CMS formatted text field.

Note: This method applies the style to an entire paragraph. It cannot be used to style individual words or phrases within a paragraph.

Use custom CSS

If you want to keep the default bold formatting and change the color of bold words or phrases, you can use custom CSS.

  1. In the formatted text field, highlight the text you want to make bold.

  2. Press ⌘ + B on Mac or Ctrl + B on Windows.

  3. Add the following code to the page’s custom code section inside the <head> tag:

<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 page.

To apply the same styling across your entire site:

  1. Open Site Settings.

  2. Go to Custom Code.

  3. Add the same CSS to the appropriate code section.

CMS formatted text fields do not currently support changing the color of bold text directly. However, you can achieve this using custom text styles or custom CSS, depending on your needs.

Use text styles

If you want full control over text color and font weight, create and apply a custom text style instead of using the default bold formatting.

  1. Open the Assets panel.

  2. Scroll to Styles.

  3. Create a new heading style, or repurpose an existing one such as H4, H5, or H6.

  4. Configure the style with your preferred color and font weight.

  5. Apply the style within your CMS formatted text field.

Note: This method applies the style to an entire paragraph. It cannot be used to style individual words or phrases within a paragraph.

Use custom CSS

If you want to keep the default bold formatting and change the color of bold words or phrases, you can use custom CSS.

  1. In the formatted text field, highlight the text you want to make bold.

  2. Press ⌘ + B on Mac or Ctrl + B on Windows.

  3. Add the following code to the page’s custom code section inside the <head> tag:

<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 page.

To apply the same styling across your entire site:

  1. Open Site Settings.

  2. Go to Custom Code.

  3. Add the same CSS to the appropriate code section.

FAQ

  • Why can’t I change the color of bold text directly in a CMS formatted text field?

    CMS formatted text fields currently support bold formatting but do not provide a built-in option for assigning a separate color to bold text.

  • Can I change the color of only one bold word in a paragraph?

    Yes. Use the custom CSS method and apply bold formatting to the specific word or phrase. The CSS will style all bold text within the scope where it is applied.

  • Will the custom CSS affect my entire site?

    Only if you add the CSS in Site Settings. If you add it to a page’s custom code section, the styling applies only to that page.

Updated

Related articles

How to style links for a CMS detail page

Limiting the number of visible CMS items

Using images with unique aspect ratios in the CMS

Using Markdown in the CMS

Using on-page editing