Changing font color in WordPress is one of the fastest ways to make your content easier to read and visually match your brand. But there are several different places where font color is controlled, from the block editor and Classic Editor to theme settings and custom CSS.
In this step by step guide, you will learn practical ways to change font color in WordPress for individual words, paragraphs, headings, and even global text and link colors. By the end, you will know when to use simple editor controls, when to adjust theme options, and when to copy paste safe CSS snippets.
What You Need to Start
- Access to your WordPress admin dashboard with an Administrator or Editor account.
- At least one post or page where you can safely test new text and font color settings.
- Basic familiarity with the WordPress dashboard, including Posts, Pages, and Appearance » Customize.
- The editor you actually use on your site, either the Block Editor (Gutenberg) or the Classic Editor plugin.
- Optional but recommended a recent site backup or a staging site if you are planning larger design changes.
Step 1: Understand Where to Change Font Color in WordPress
Before you start clicking color pickers, it helps to understand the main places where font color is controlled in WordPress. This lets you choose the right method and avoid fighting with conflicting styles.
Identify Where You Want to Change Font Color
- Decide whether you want to change the font color of a single word or sentence, a whole paragraph or heading, or everywhere on the site.
- If you only need a one off highlight inside a post, plan to use the Block Editor or Classic Editor text color controls.
- If you want to change default font colors across your site (body text, headings, links), plan to use your theme’s Colors or Typography settings.
- If you need very specific control, such as different colors for sidebar widgets or navigation links, plan to add a few lines of custom CSS.
- Write down your brand colors (HEX or RGB codes) so you can reuse exactly the same shades whenever you change font color in WordPress.
Verify success at this step by having a short note like “Change links to brand blue everywhere, and make callout sentences in posts a slightly brighter font color.” This clarity keeps you focused and prevents random color choices that make your site look inconsistent.
Quick Comparison of WordPress Font Color Methods
Use this table to quickly choose the best way to change font color in WordPress for your situation.
| Method | Where You Use It | Main Purpose |
|---|---|---|
| Change Font Color in Block Editor | Post or Page editor » Select a Paragraph, Heading, or text block | Safely change font color for individual blocks using built in Color settings without touching code. |
| Change Font Color in Classic Editor | Classic Editor » Visual tab toolbar » Text color icon | Recolor selected words or paragraphs with a simple toolbar option in the older editor. |
| Set Global Text and Link Colors | WordPress dashboard » Appearance » Customize » Colors / Typography | Control default font color for body text, headings, and links across your entire site at once. |
| Change Font Color with Custom CSS | Appearance » Customize » Additional CSS | Apply precise font color to specific elements like post titles, widgets, or menus with CSS rules. |
Step 2: Change Font Color in the WordPress Block Editor
If you use the modern Block Editor (Gutenberg), you can change font color for individual blocks directly in the sidebar settings.
Open Your Post in the Block Editor
- Log in to your WordPress dashboard and go to Posts » All Posts or Pages » All Pages.
- Click the title of the post or page where you want to change the font color.
- In the editor, click on the Paragraph, Heading, or other text block whose font color you want to change.
Use the Color Settings Panel
- With the block selected, look at the Block tab in the right sidebar and find the Color or Text section.
- Click the Text color option and choose one of the preset colors, or open the full color picker to enter a custom HEX code.
- Optionally, use the Highlight or Background color option to add a colored background behind the text.
- Repeat these steps for any other blocks that need different font color settings.
- Click Update or Publish in the top right corner to save your changes.
Verify success when you click View Post and see the selected blocks or words displaying in the new font color on the live site. If colors do not appear, your theme may be overriding them with stronger styles.
Step 3: Change Font Color in the Classic Editor
If your site still uses the Classic Editor, the text color tool lets you recolor words and paragraphs from the Visual tab and quickly change font color where needed.
Open Content in the Classic Editor
- From the dashboard, go to Posts » All Posts or Pages » All Pages and open the content in the Classic Editor.
- Make sure you are on the Visual tab, not the Text (HTML) tab.
- If you only see one row of icons, click the Toolbar Toggle button to reveal the second row of formatting tools.
Apply a New Font Color
- Select the specific word, sentence, or paragraph whose font color you want to change.
- Click the Text color icon (an “A” with a colored underline) and choose a color from the palette.
- If available, click Custom to enter a HEX or RGB code for a brand font color.
- Click Update or Publish to save your changes.
Verify success when the selected text shows the new font color on the frontend. If the color disappears when you switch between Visual and Text tabs, check that no conflicting HTML tags are being added or removed.
Step 4: Set Global Text and Link Colors in Theme Settings
Use your theme’s Customizer when you want to change default font color across your entire site instead of editing colors block by block.
Open the Theme Customizer
- In your WordPress dashboard, go to Appearance » Customize to open the theme Customizer.
- Look for panels named Colors, Typography, Design, or Global Styles, depending on your theme.
Adjust Global Text and Link Colors
- Open the relevant panel and find settings such as Body Text Color, Heading Color, and Link Color.
- Click each control to open the color picker, then choose your desired font color or paste your brand color codes.
- Watch the live preview on the right side to see how your changes affect posts, pages, and menus.
- When you are happy with the result, click Publish at the top of the Customizer.
Verify success when you browse several posts and pages and see the new font color applied consistently to body text, headings, and links. If some sections still use old colors, they may be controlled by separate theme options or custom CSS.
Step 5: Change Font Color with Custom CSS
Custom CSS gives you precise control when the built in options are not enough. This is useful for targeting specific elements such as post titles, widget text, or menu links with a custom font color.
Open the Additional CSS Panel
- Go to Appearance » Customize and click the Additional CSS panel.
- Scroll to the bottom of any existing CSS and click inside the editor area.
Add and Customize Font Color Rules
- Paste a small CSS snippet that targets the elements you want to recolor. For example:
/* Change body font color inside posts */
.entry-content p {
color: #333333;
}
/* Change link font color inside posts */
.entry-content a {
color: #0066cc;
}
/* Change H2 heading font color in posts */
.entry-content h2 {
color: #111111;
}
- Replace the HEX codes (
#333333,#0066cc,#111111) with your own brand font color values.
Publish and Test Your CSS
- Click Publish, then open a post on the frontend and refresh the page to see the new colors.
Verify success when the specific elements you targeted (paragraphs, links, headings) show the new font color. If nothing changes, your theme may use different CSS selectors, so you may need to inspect elements in your browser’s developer tools or consult your theme documentation.
Step 6: Check Readability and Accessibility of Your Font Colors
Changing font color is not just about looks it also affects how easily visitors can read your content.
Check Contrast and Legibility
- Visit a few posts and pages and read them as if you were a first time visitor.
- Make sure there is enough contrast between font color and background (for example, avoid light gray text on a white background).
- Check that links are clearly distinguishable from regular text using a different font color, underline, or both.
- Test your site on both desktop and mobile to see how colors appear on different screens.
- If you see any text that is hard to read, adjust the font color to be darker or more saturated.
Verify success when all your text is easy to read, links stand out clearly, and your font color choices feel consistent with your brand across the site.
Further Reading on WordPress Typography and Design
- How to Change Font in WordPress
- Beginner Guide to Choosing a WordPress Theme
- Beginner Guide to WordPress Customizer Settings
- Beginner Guide to Accessibility and Color Contrast for Websites
Frequently Asked Questions About Font Color in WordPress
Basic Font Color Questions
Can I change font color for a single word only
Why does my new font color not show on the live site
How do I reset font color back to the theme default
SEO and Design Considerations
Will changing font color affect my SEO
What colors work best for links in WordPress
Can I use different font colors for dark mode users
prefers-color-scheme media query. Always test both light and dark versions to keep font color readable and consistent in each mode.




