This guide shows you how to change font color in WordPress using built-in tools, custom CSS, and theme options. Whether you’re editing a single post or styling your entire site, we’ll walk you through every method with clear instructions.
Key Takeaways
- Use the Block Editor: Change font color instantly in posts and pages using the built-in color picker in Gutenberg.
- Apply Custom CSS: For advanced styling, add custom CSS via the Customizer or a child theme to control font colors site-wide.
- Leverage Theme Settings: Many WordPress themes offer font color controls in the Customizer under Typography or Design settings.
- Use a Child Theme: Always use a child theme when adding custom CSS to avoid losing changes during theme updates.
- Test Across Devices: After changing font colors, preview your site on mobile and desktop to ensure readability and consistency.
- Avoid Over-Styling: Stick to 2–3 font colors max to maintain a clean, professional look and strong visual hierarchy.
- Check Accessibility: Ensure sufficient contrast between text and background colors for readability and ADA compliance.
How to Change Font Color in WordPress: A Complete Guide
Changing the font color in WordPress might seem simple, but there are several ways to do it—depending on whether you’re editing a single paragraph, styling an entire page, or customizing your site’s global design. Whether you’re using the default block editor, a page builder, or custom code, this guide will walk you through every method step by step.
By the end of this article, you’ll know how to change font color in WordPress using the built-in editor, theme settings, and custom CSS. You’ll also learn best practices to keep your site looking professional and accessible.
Method 1: Change Font Color Using the Block Editor (Gutenberg)
The easiest way to change font color in WordPress is through the block editor, also known as Gutenberg. This method works for individual blocks like paragraphs, headings, and buttons.
Step 1: Open the Post or Page
Log in to your WordPress dashboard. Go to Posts or Pages, then click Edit on the content you want to modify.
Step 2: Select the Text Block
Click on the paragraph, heading, or text block where you want to change the font color. For example, click on a paragraph block.
Step 3: Open the Color Settings
In the right-hand sidebar (or above the block in older versions), look for the Color section. Click on the Text dropdown.
Step 4: Choose a Color
You’ll see a color palette with preset options. Click on any color to apply it. You can also click the Custom color option to pick a specific shade using a color picker or enter a hex code (like #FF5733 for orange).
Step 5: Save Your Changes
Once you’re happy with the color, click Update or Publish to save your changes.
Tip: You can also change the background color of a block using the same panel. Just switch from “Text” to “Background” in the Color settings.
Method 2: Change Font Color Using the WordPress Customizer
If you want to change font colors across your entire website—like for all headings or body text—the WordPress Customizer is a powerful tool. This method is ideal for global styling.
Step 1: Access the Customizer
Go to Appearance > Customize in your WordPress dashboard.
Step 2: Look for Typography or Color Settings
Depending on your theme, look for sections like:
– Typography
– Colors
– Global Styles
– Site Identity
Many modern themes (like Astra, GeneratePress, or Kadence) include font color controls here.
Step 3: Adjust Font Colors
For example, in the Typography section, you might see options like:
– Body Text Color
– Heading Color (H1, H2, etc.)
– Link Color
Click on any of these to open the color picker and choose your desired font color.
Step 4: Publish the Changes
Click the Publish button at the top to apply your changes site-wide.
Note: Not all themes support font color changes in the Customizer. If you don’t see these options, your theme may require custom CSS (see Method 3).
Method 3: Change Font Color Using Custom CSS
For full control over font colors—especially if your theme doesn’t offer built-in options—you can use custom CSS. This method is perfect for developers or advanced users.
Step 1: Open the Customizer
Go to Appearance > Customize > Additional CSS.
Step 2: Add Your CSS Code
Here are some common examples:
Change all paragraph text color:
Visual guide about How to Change Font Color in WordPress
Image source: ultimateblocks.com
p {
color: #333333;
}
Change all heading colors:
h1, h2, h3, h4, h5, h6 {
color: #0056b3;
}
Change link color:
a {
color: #e74c3c;
}
Change font color for a specific class or ID:
.custom-text {
color: #2ecc71;
}
Step 3: Publish the CSS
Click Publish to save your changes.
Tip: Always test your CSS on different pages to make sure it doesn’t break other styles. For more on adding CSS safely, check out our guide on the best way to add CSS in WordPress.
Method 4: Change Font Color in Page Builders (Elementor, Divi, etc.)
If you’re using a page builder like Elementor or Divi, changing font color is even more visual and flexible.
Step 1: Edit with the Page Builder
Open the page with your page builder (e.g., click “Edit with Elementor”).
Step 2: Select the Text Element
Click on any text widget, heading, or button.
Step 3: Open Style Settings
In the left panel, go to the Style tab. Look for Text Color or Typography.
Step 4: Pick Your Color
Use the color picker or enter a hex code. You can also adjust hover states and responsive settings.
Step 5: Save and Update
Click Update to save your changes.
Pro Tip: In Elementor, you can create global color settings under Site Settings > Global Colors. This lets you reuse colors across your site and update them all at once.
Method 5: Use a Child Theme for Permanent Changes
If you’re adding custom CSS, it’s best to use a child theme. This ensures your changes aren’t lost when the parent theme updates.
Step 1: Create or Activate a Child Theme
If you don’t have one, install a child theme plugin or manually create one. For help, see our guide on what is a child theme in WordPress.
Step 2: Add CSS to the Child Theme
Go to Appearance > Theme File Editor, select your child theme, and open style.css. Add your font color CSS at the bottom.
Step 3: Save and Test
Save the file and refresh your site to see the changes.
Important: Never edit the parent theme directly. Always use a child theme to preserve your customizations.
Troubleshooting Common Issues
Font Color Not Changing?
– Make sure you’re editing the correct block or element.
– Check if your theme or plugin is overriding the style with higher-specificity CSS.
– Clear your browser and WordPress cache.
Color Looks Different on Mobile?
Some themes apply different styles on mobile. Use responsive settings in your page builder or add media queries in CSS:
@media (max-width: 768px) {
p {
color: #555555;
}
}
Accessibility Warning?
Use tools like the WebAIM Contrast Checker to ensure your text has enough contrast against the background. Aim for a contrast ratio of at least 4.5:1 for normal text.
Best Practices for Changing Font Color in WordPress
- Keep it consistent: Use the same font colors across your site for headings, body text, and links.
- Limit your palette: Stick to 2–3 main colors to avoid a chaotic design.
- Prioritize readability: Dark text on a light background is easiest to read. Avoid light gray on white.
- Test on all devices: Colors may look different on mobile screens due to brightness and glare.
- Use semantic HTML: Style headings (H1, H2) properly instead of just changing font size and color.
Conclusion
Changing font color in WordPress is simple once you know the right tools. Whether you’re using the block editor for quick edits, the Customizer for global changes, or custom CSS for full control, you now have multiple ways to customize your site’s typography.
Remember to always test your changes, use a child theme for safety, and prioritize accessibility. With these methods, you can make your WordPress site look exactly how you want—without touching a line of code (unless you want to!).
For more WordPress customization tips, explore our guides on how to apply a WordPress theme or how to update a theme on WordPress safely.