How to Change Font Color in WordPress — The Complete WordPress Typography and Customization Guide (2026)

Introduction — Why WordPress Typography Customization Matters

Most WordPress websites look nearly identical right out of the box. Same fonts. Same black text. Same blue links. If your site looks like everyone else’s, visitors leave. Typography is one of the fastest ways to make your site feel professional and on-brand — and most people never touch it past the defaults.

This guide covers how to change font color in WordPress using every available method — the Block Editor, the Classic Editor, the Theme Customizer, and custom CSS. It also walks through how to change link color in WordPress, how to add a font in WordPress, how to indent text properly, and how to edit the primary navigation bar in Divi. Whether you just installed WordPress or you have been running a
site for years, every method here is explained clearly so you
can follow along without a developer — and if you ever want
someone to handle it for you, the team at TechoGiant
is one message away.

How Font Color, Link Color, Custom Fonts, Indentation, and Navigation Styling All Connect

These five customizations are not separate problems. They all come from the same place — your theme’s CSS. When you understand that WordPress applies styles in layers (theme defaults, then customizer settings, then custom CSS, then inline HTML), everything starts to make sense. Changing one thing sometimes breaks another, and this guide shows you how to avoid those traps.

Who This Guide Is For

This guide is written for beginners and intermediate WordPress users. No coding experience is required to follow most methods. For the CSS sections, every code snippet is ready to copy and paste — you just swap in your own colors or values.

Quick Overview of Everything Covered

Part 1 covers font color. Part 2 covers link color. Part 3 covers adding custom fonts. Part 4 covers indenting text. Part 5 covers the Divi navigation bar. Each part has multiple methods ranked from easiest to most flexible.

Part 1: How to Change Font Color in WordPress

Why Font Color Customization Is Important for Your Website

Font color is not just a design preference. It directly affects whether people actually read your content. A study published by the
Nielsen Norman Group
found that low contrast text is one of the most common usability
problems on the web — and yet it shows up constantly on WordPress sites where the theme default color does not match the background well.

Readability, Brand Consistency, and User Experience

When someone lands on your site, you have about three seconds before they decide to stay or leave. Text that is hard to read is the fastest way to lose them. A clean contrast between your text color and background color tells visitors you put thought into your site. Brand consistency matters too — if your logo uses a specific shade of teal, using that same color for your headings creates a visual connection that feels intentional and professional.

Accessibility and Contrast Ratios (WCAG Standards Explained Simply)

WCAG stands for Web Content Accessibility Guidelines. These are internationally recognized standards for making websites usable for people with visual impairments. The rule that matters most for font color is the contrast ratio. Normal body text needs a contrast ratio of at least 4.5:1 against its background. Large text (18pt or 14pt bold and above) needs at least 3:1. You can check any color combination using the free
WebAIM Contrast Checker tool.

. This is not just about accessibility — Google has confirmed that page experience signals including readability are part of how it evaluates pages.

Does Changing Font Color Affect SEO?

Changing visible text color does not directly impact rankings. What does matter is that your text remains readable and that you never hide text by setting the font color the same as the background. Google’s crawlers flag that as cloaking — a black-hat tactic that can result in a manual penalty.

WordPress.com vs WordPress.org — Does It Affect Your Font Color Options?

This is the first question to answer because the platform you are on determines which methods are available to you.

Key Differences Between the Two Platforms

WordPress.org is the self-hosted version. You download WordPress, host it on your own server, and have complete control over everything — including adding custom CSS, installing plugins, and editing theme files. WordPress.com is a hosted service. The free and lower-tier paid plans lock down a lot of customization options, including CSS access.

What Is Available on Free vs Paid Plans

On WordPress.com’s free plan, your font color options are limited to whatever the theme allows through the block editor’s color palette. On the Personal plan and above, you get access to additional customization. On the Premium plan and above, you can add custom CSS. On WordPress.org (self-hosted), all methods in this guide are fully available.

Which Methods Apply to Which Platform

Methods using the Block Editor work on both platforms. The Theme Customizer is available on both, though options vary by theme. Custom CSS works on WordPress.com Premium and above, and on all WordPress.org installations. The HTML span tag method works on WordPress.com with the Classic Editor enabled.

Method 1 — How to Change Font Color in the Block Editor (Gutenberg)

The Block Editor (Gutenberg) is the default editor in WordPress since version 5.0. It is the easiest way to change font color without touching any code.

Changing Font Color for a Single Paragraph Block

Click anywhere inside the paragraph you want to change. On the right side of your screen, look for the Block panel. Click “Typography” to expand it. You will see a “Color” option. Click “Text” and a color picker will appear. You can either select from your theme’s preset color palette or type in a custom hex code like #FF5733 for a specific orange shade. Click anywhere outside the picker to apply.

Changing Heading Block Color

Select your heading block. In the right sidebar, go to “Color” under the Block settings panel. Click “Text” and choose your color. Heading blocks support the same color picker as paragraph blocks. This only changes that specific heading — it does not affect other headings site-wide.

Using Color Palettes vs Custom Hex Codes

Your theme comes with a predefined color palette shown as circles in the color picker. These are the colors your theme designer chose to work together. If you use a color outside that palette, you might accidentally choose something that clashes with your design. For precise brand colors, always use a hex code. The HTML Color Picker tool at htmlcolorcodes.com lets you visually pick any color and get its exact code.

Changing Font Color for Buttons, Lists, and Other Block Types

Buttons, lists, and quote blocks all support font color changes through the same Block settings panel. Select the block, look for Color in the right sidebar, and click Text. Not all block types expose color controls — if you do not see the option, switch to the HTML view of that block and add an inline style attribute manually.

Method 2 — How to Change Font Color Using the Classic Editor

Some users prefer the Classic Editor — especially those who migrated from older WordPress setups. The font color workflow is different here.

Enabling the Classic Editor in WordPress

Go to Plugins > Add New and search “Classic Editor.” Install and activate it. Once activated, go to Settings > Writing and choose whether to use it as the default for all posts or allow users to switch between editors.

Using the Text Color Toolbar Button Step by Step

In the Classic Editor, look for the toolbar at the top of the editing area. If you see only one row of buttons, click the “Toolbar Toggle” button (it looks like a grid of dots) to reveal the second row. In the second row, find the “A” button with a colored underline — that is the text color tool. Select the text you want to color, click the A button, and choose a color from the dropdown.

Switching to HTML and Text View for Manual Color Codes

For more control, click the “Text” tab in the top right corner of the Classic Editor. This is the HTML tab. Here you can apply inline color changes using the span tag like this:

html

<span style=”color: #009999;”>Your text here</span>

Always remember to open with the span tag and close with the closing span tag. A missing close tag syntax error is one of the most common reasons color changes do not apply correctly. Check your spelling — CSS properties are case-sensitive and a misspelled tag simply will not work.

Common Issues and Quick Fixes

If your color change is not showing up, it is usually one of three things. First, the theme CSS might be overriding your inline style. Second, you might have a missing or broken close tag. Third, the specific font color property might not be supported by your theme. Try adding !important to your inline style as a temporary test:

html

<span style=”color: #009999 !important;”>Your text here</span>

Method 3 — How to Change Font Color Site-Wide Using the Theme Customizer

The Theme Customizer lets you change font colors globally — meaning every heading or every paragraph across your entire site changes at once.

Accessing the WordPress Customizer (Appearance > Customize)

Go to Appearance > Customize in your WordPress dashboard. A live preview panel will open with your site on the right and customization options on the left. The options you see depend entirely on your active theme. Some themes offer rich typography controls and others offer almost none.

Locating Typography and Color Settings

Look for panels labeled “Colors,” “Typography,” “Global Styles,” or “Design.” Popular free themes like Astra, OceanWP, and GeneratePress have dedicated Typography sections where you can control font color for headings, body text, and links separately.

Changing Font Color Globally for Headings, Body Text, and Links

Once you find the color settings, click the element you want to change (headings, body, or links) and a color picker will appear. Enter your hex code or pick from the palette. Changes apply site-wide instantly in the preview — no need to re-edit each post.

Live Preview and Saving Changes

Always review your changes in the live preview before clicking “Publish.” Check both desktop and mobile views using the device toggle icons at the bottom of the customizer sidebar. When you are satisfied, click “Publish” to save.

Method 4 — How to Change Font Color Using Custom CSS

Custom CSS is the most powerful and flexible approach. It lets you target exactly what you want to change, override any theme setting, and keep everything tidy in one place.

Who Should Use This Method and When

Use custom CSS when the Block Editor or Customizer do not give you enough control. For example, if you want to change the color of only the first heading on your homepage, or style links differently inside your sidebar versus your main content area, custom CSS is the right tool.

Where to Add Custom CSS in WordPress

Go to Appearance > Customize > Additional CSS. Type or paste your CSS here. On WordPress.org you can also use a child theme’s style.css file, which is the safest long-term option because your changes survive theme updates.

CSS Selectors for Targeting Specific Text Elements

css

/* All paragraph text */

p {

  color: #333333;

}

/* All H2 headings */

h2 {

  color: #1a1a2e;

}

/* Paragraphs inside posts only */

.entry-content p {

  color: #444444;

}

Ready-to-Use CSS Code Snippets for Headings, Paragraphs, and Specific Sections

css

/* Change all heading colors at once */

h1, h2, h3, h4, h5, h6 {

  color: #2c3e50;

}

/* Change body text color */

body {

  color: #555555;

}

/* Target a specific class */

.highlight-text {

  color: #e74c3c;

}

How to Use Browser DevTools to Find the Right CSS Class

Right-click any text on your site and click “Inspect” (or “Inspect Element”). A panel opens showing the HTML and CSS for that element. Look for the class names on the element — things like .entry-content, .site-header, or .widget-title. Copy that class and use it in your custom CSS selector to target only that area.

Method 5 — How to Change Font Color in WordPress.com Using HTML

This method is specifically for WordPress.com users who have access to the Classic Editor HTML tab.

Using the HTML Span Tag with Inline Color Style

The span tag with an inline style attribute is the standard way to apply font color in plain HTML. In the Classic Editor, switch to the Text tab (the HTML tab) and wrap your text like this:

html

<span style=”color: #800000;”>This text will appear in dark red.</span>

The color property accepts any valid CSS color value — a hex code like #800000, a color name like “navy,” or an RGB value like rgb(0, 128, 128).

Step-by-Step Example with Copy-Paste Code

Suppose you want one sentence in your post to appear in teal. Switch to the Text tab in the Classic Editor, find your sentence, and wrap it:

html

<span style=”color: #009999;”>Your teal sentence goes here.</span>

To also change the font size at the same time, combine both properties inside the same tag using a semicolon separator:

html

<span style=”color: #009999; font-size: large;”>Your styled sentence here.</span>

Limitations on WordPress.com Free Plan

On the free plan, WordPress.com may strip certain inline styles when you save. If your color changes disappear after saving, you need to upgrade to a paid plan or use a block-level color option instead.

Font Color Best Practices — Do’s and Don’ts

Choosing Accessible, High-Contrast Color Combinations

Always run your color choices through a contrast checker before publishing. Black text on white (#000000 on #FFFFFF) has a contrast ratio of 21:1 — perfect. Dark gray (#333333) on white is 12.6:1 — also excellent. Avoid light gray on white — a contrast ratio below 4.5:1 fails WCAG standards and is genuinely hard to read.

Keeping Color Consistent with Your Overall Theme

Pick two or three accent colors and stick with them. One color for headings, one for body text, one for links and highlights. More than that and your site starts to feel chaotic. Use your brand’s primary color (the one in your logo) for at least one text element to create visual consistency.

Mistakes to Avoid — Overusing Colors and Low-Contrast Text

Do not rainbow your headings. Do not make every paragraph a different color. Changing font color should emphasize something important, not decorate everything equally. Also avoid color-coding information that is only distinguished by color — colorblind visitors will not see the difference.

How to Preview Font Color Changes Before Going Live

Use the Theme Customizer’s live preview for site-wide changes. For block-level changes, the Block Editor shows a real-time preview as you make them. For custom CSS changes, always test on a staging site or in a private draft post before pushing to production.

Part 2: How to Change Link Color in WordPress

How to Change Link Color in WordPress — Why It Is a Separate Skill

Link color is a separate CSS concern from body text color. Links have multiple states, and each one needs to be styled intentionally.

The Difference Between Body Text Color and Link Color

Body text uses the color property applied to p, div, and similar tags. Links use the color property on a (anchor) tags. Because links appear inside body text, they inherit some body text styles — but the browser also applies its own default link color (blue for unvisited, purple for visited) which often overrides theme settings.

Understanding All Four Link States — Normal, Hover, Visited, Active

Every link has four CSS states. Normal is how the link looks by default. Hover is what it looks like when someone moves their mouse over it. Visited is the color after a user has already clicked it. Active is the color at the exact moment of clicking. Styling all four creates a polished, consistent experience. Leaving them at browser defaults — blue and purple — looks unfinished on most modern sites.

Why Styling All Four States Matters for User Experience and Branding

Imagine a blog with a dark green color scheme where all the body text is charcoal. The default blue links look completely out of place. A reader might not even realize those blue words are clickable because they are so disconnected from the rest of the design. Consistent link color that matches your brand palette signals to visitors that every detail was considered.

Method 1 — Change Link Color Using the Theme Customizer

Locating Link Color Settings Under Colors or Typography Panel

Go to Appearance > Customize. Look for “Colors,” “Links,” or “Typography” in the left panel. Most well-maintained free themes like Astra or Neve include a dedicated link color option. Click the link color swatch and enter your hex code.

Changing Link Color Site-Wide in a Few Clicks

Select your color and watch the live preview update. This changes all links across your entire site at once. Save by clicking “Publish.” This is the fastest method for site-wide link color changes and requires zero coding.

Limitations Depending on Your Active Theme

Some themes, especially older or minimalist ones, do not expose link color controls in the Customizer. If you cannot find a link color option, use the custom CSS method below.

Method 2 — Change Link Color in the Block Editor

Changing Inline Link Color Within a Paragraph Block

In the Block Editor, select the text you want to turn into a link and click the link icon. After setting the URL, highlight the linked text and look for the text color option in the formatting toolbar. This applies an inline style to only that link.

Limitations vs Site-Wide CSS Approach

This only changes the color of one specific link. Doing this for every link on your site is not practical. For consistent link color across all content, use the Customizer or custom CSS instead.

Method 3 — Change Link Color Using Custom CSS

CSS Code for Default, Hover, Visited, and Active Link States

css

/* Default link color */

a {

  color: #0073aa;

}

/* Hover state */

a:hover {

  color: #005177;

}

/* Visited link color */

a:visited {

  color: #551a8b;

}

/* Active state (moment of click) */

a:active {

  color: #ff6600;

}

How to Target Links in Specific Areas Only (Posts, Sidebar, Footer)

css

/* Links inside posts only */

.entry-content a {

  color: #0073aa;

}

/* Sidebar links */

.widget a {

  color: #333333;

}

/* Footer links */

.site-footer a {

  color: #ffffff;

}

Ready-to-Use CSS Snippets — Copy and Paste

Paste the above snippets into Appearance > Customize > Additional CSS. Adjust the hex codes to match your brand colors. Save and preview.

How to Find Conflicting Styles Using Browser DevTools

Right-click a link on your site and click Inspect. In the Styles panel on the right, look for any color rules applied to a tags. If you see a rule with a strikethrough, that means it is being overridden by something else. The rule at the top of the cascade (with no strikethrough) is the one currently winning. You need to write a more specific selector to beat it.

Method 4 — Change Link Color with a Page Builder (Elementor and Divi)

Changing Link Color in Elementor (Global Settings vs Widget Level)

In Elementor, go to Site Settings > Typography > Links. Set the default link color here for site-wide changes. For individual widget overrides, select the widget, go to the Style tab, and look for “Link Color” under Typography settings.

Changing Link Color in Divi (Theme Options vs Module Settings)

In Divi, go to Divi > Theme Options > General > Layout. You will find options for link color and link hover color. These apply globally. For module-level control, open any module’s design settings and look for the Links section under Typography.

Page Builder vs Raw CSS — Which Is Better?

Page builders are faster and more visual. Raw CSS gives you more precision, especially for targeting specific areas. If you already use Elementor or Divi, stick with their built-in tools first. Only reach for custom CSS when the page builder options run out.

Common Problems When Changing Link Color (And How to Fix Them)

Link Color Not Changing After CSS Update

Most likely a caching issue. Clear your browser cache, then clear your WordPress site cache if you use a caching plugin like WP Rocket or W3 Total Cache.

Theme Overriding Your Custom Link Color

Add !important temporarily to confirm the issue, then write a more specific CSS selector to win the cascade without using !important long-term.

Link Color Looks Different on Mobile

Mobile browsers sometimes apply their own touch highlight colors. Add -webkit-tap-highlight-color: transparent; to your CSS to disable the default mobile tap highlight.

Part 3: How to Add Custom Fonts in WordPress

How to Add Fonts in WordPress — Why Default Fonts Are Not Always Enough

Default system fonts like Arial, Times New Roman, and Georgia are safe and fast. However, they look generic. A custom font — especially from Google Fonts or Adobe Fonts — makes your site feel unique and reinforces your brand identity.

How Custom Fonts Impact Brand Identity and User Trust

Typography is one of the strongest signals of professionalism. A legal firm using Playfair Display reads as trustworthy and established. A tech startup using Inter reads as clean and modern. Fonts carry emotional weight, and visitors process that feeling instantly, often before they read a single word.

How Typography Affects Bounce Rate and Readability

According to research by Google on reading behavior, font choice and line height directly impact how long people stay on a page. Poor typography — including fonts that are hard to read, too small, or too tightly spaced — increases bounce rate. Google also confirmed that Core Web Vitals consider font loading performance as part of the Largest Contentful Paint metric.

Types of Fonts You Can Add — Google Fonts, Adobe Fonts, Self-Hosted

Google Fonts is the most common source — it is free, has 1,400+ fonts,
and is easy to integrate. Adobe Fonts is available with a Creative Cloud subscription and offers more premium options. Self-hosted fonts are font files you upload directly to your server — the best option for performance and GDPR compliance.

A Quick Note on Font Licensing Before You Start

Google Fonts are all open-source (mostly SIL Open Font License). Adobe Fonts require an active CC subscription. If you find a font elsewhere, always check its license before using it commercially.

Method 1 — Add Google Fonts via the WordPress Block Editor (WordPress 6.x)

Accessing Font Management Under Appearance > Editor > Styles

In WordPress 6.x with a block-based theme (like Twenty Twenty-Three), go to Appearance > Editor. Click the Styles icon in the top right corner (it looks like a half-circle). Then click “Typography.”

Browsing, Installing, and Applying Google Fonts Directly

Click “Manage Fonts.” You will see a panel where you can browse and install Google Fonts directly into WordPress — no plugin needed. Click the font you want and hit “Install.” Once installed, go back to the Typography panel and assign it to headings or body text.

Assigning Fonts to Headings, Body Text, and Buttons

In the Styles panel, click “Headings” and select your installed font from the font family dropdown. Do the same for “Text” (body) and “Buttons.” Changes apply site-wide and appear in the live editor preview.

Removing Fonts You No Longer Need

Go back to Manage Fonts and click the font you want to remove. Hit “Delete” to uninstall it. Removing unused fonts keeps your site lighter and faster.

Method 2 — Add Fonts Through the Theme Customizer

Locating Typography Settings in the Customizer

Go to Appearance > Customize > Typography (this panel is only present if your theme supports it). Themes like Astra, OceanWP, GeneratePress, and Neve all have typography panels with Google Fonts built in.

Switching Fonts for Headings and Body Text

Click the font family selector for Headings or Body Text. Start typing a font name like “Roboto” or “Lato” and it will appear in the dropdown. Select it, adjust the font size property and line height if needed, and save.

What to Do When Your Theme Does Not Have Font Options

If your theme has no typography panel, use a font plugin (Method 3) or add fonts manually using CSS (Method 4).

Method 3 — Add Custom Fonts Using a Plugin

Best Plugins for Adding Custom Fonts (Quick Comparison)

Step-by-Step: Installing, Configuring, and Applying a Font Plugin

Go to Plugins > Add New, search your chosen plugin, and click Install > Activate. Follow the plugin’s setup wizard. Most font plugins add a settings page under Appearance or directly in the Customizer where you choose fonts for different elements.

Uploading Self-Hosted Font Files via Plugin

With Custom Fonts by Brainstorm Force, go to Appearance > Custom Fonts > Add New. Upload your .woff or .woff2 font files. Name the font family and save. The font will then appear in the Customizer’s font selectors.

Performance Considerations

Every external font request adds HTTP load time. Self-hosted fonts (loaded from your own server) are consistently faster than loading from Google’s CDN. Use OMGF to automatically download and self-host Google Fonts with one click.

Method 4 — Add Custom Fonts Manually Using CSS and @font-face

What Is @font-face and When Should You Use It?

The @font-face rule is a CSS declaration that tells the browser where to find and download a font file. Use this method when you have custom font files that are not available through any plugin or font service — for example, a branded font your designer created.

How to Upload Font Files to WordPress (Media or FTP)

Upload .woff and .woff2 files through the WordPress Media Library (Media > Add New). Once uploaded, copy the file URL shown in the attachment details — you will need it for the CSS rule.

Writing the @font-face Rule Correctly

css

@font-face{ font-display:swap;

  font-family: ‘MyCustomFont’;

  src: url(‘https://yoursite.com/wp-content/uploads/2025/myfont.woff2’) format(‘woff2’),

       url(‘https://yoursite.com/wp-content/uploads/2025/myfont.woff’) format(‘woff’);

  font-weight: normal;

  font-style: normal;

}

Applying the Font to Specific Elements with CSS

css

h1, h2, h3 {

  font-family: ‘MyCustomFont’, sans-serif;

}

Using a Child Theme to Avoid Losing Changes on Theme Updates

If you add custom CSS directly to your theme’s style.css file, a theme update will wipe it out. Always create a child theme and add your custom CSS there instead. Most major themes have documentation on creating a child theme, and the free “Child Theme Configurator” plugin does it automatically.

Why You Should Host Fonts Locally — Performance and Privacy

Reducing External HTTP Requests for Faster Load Speed

Every time a visitor loads your page, their browser makes a request to Google’s servers to download the font. That round-trip adds latency — sometimes 200ms to 400ms depending on the user’s location and network. Self-hosting eliminates that external request entirely.

GDPR Compliance — The Google Fonts Privacy Concern Explained

In 2022, a German court fined a website operator for using Google Fonts because loading the font sent the visitor’s IP address to Google without consent. Self-hosting fonts removes this concern entirely because no data is sent to Google at all. If your site serves European visitors, self-hosted fonts are the safest choice.

How to Download and Self-Host Google Fonts Step by Step

Visit google-webfonts-helper.herokuapp.com, search for your font, select the styles you need, download the zip file, extract the .woff and .woff2 files, upload them to your WordPress media library or via FTP, and add the @font-face rule as shown above.

Font Best Practices for WordPress

Limit to 2 to 3 Font Families Maximum

One font for headings. One for body text. One optional accent for buttons or quotes. More than three and your site starts to look visually noisy — and each additional font family adds a separate file download.

Font Pairing Tips for Headings and Body Text

Classic pairings that work well: Playfair Display (headings) with Source Sans Pro (body), Montserrat (headings) with Open Sans (body), Merriweather (headings) with Lato (body). A general rule is to pair a serif with a sans-serif for contrast.

Font Size, Line Height, and Letter Spacing for Readability

Body text should be at least 16px. Line height for body text should be between 1.5 and 1.7 — tight line spacing is one of the fastest ways to make a page feel hard to read. Letter spacing for body text should stay at 0 or slightly positive. Negative letter spacing on body text kills readability.

How Fonts Impact Core Web Vitals and SEO Performance

Font files that are not optimized can delay the Largest Contentful Paint score. Use font-display: swap; in your @font-face rule to ensure the browser shows a fallback font while the custom font loads, instead of showing invisible text. This keeps your LCP score healthy.

Part 4: How to Indent Text in WordPress

How to Indent Text in WordPress — Why It Is Trickier Than It Looks

Indenting text in WordPress is not as simple as pressing Tab. The editor intercepts the Tab key for other purposes, and the formatting tools are not always obvious.

Why WordPress Does Not Have a Simple Tab Indent Option

WordPress uses a rich text editing model where pressing Tab moves focus to the next UI element rather than inserting an indent character. This is intentional — it keeps keyboard navigation accessible. But it means you need a different method for indenting.

Block Editor vs Classic Editor Indenting Behavior

In the Block Editor, indent controls are hidden inside block settings and only available for list blocks by default. In the Classic Editor, there are visible indent toolbar buttons, but they use blockquote and margin styles under the hood, which are controlled by your theme’s CSS.

Paragraph Indent vs Block Indent — Understanding the Difference

A paragraph indent uses text-indent in CSS to push the first line of a paragraph to the right. A block indent uses margin-left or padding-left to move the entire block of text inward from the left edge. Both are valid, but they create visually different results.

When Indentation Improves Content and When It Hurts It

Indentation is useful for academic-style content, long-form essays, blockquotes, and legal documents. It is usually unnecessary for blog posts and can actually hurt readability on mobile screens where there is not much horizontal space to begin with.

Method 1 — Indent Text in the Block Editor (Gutenberg)

Using Increase and Decrease Indent Buttons for Lists

When you select a List block in the Block Editor, the toolbar shows indent buttons — an arrow pointing right (indent) and left (outdent). These only appear for list blocks, not paragraphs. Use them to create nested list levels.

Indenting a Paragraph Using Block Margin and Padding Settings

Select a Paragraph block and go to the Block settings panel on the right. Click “Dimensions” (in newer WordPress versions). You will see Margin and Padding controls. Increase the left padding to push the text inward. This is the cleanest way to indent a single paragraph in the Block Editor without touching CSS.

Using the Quote Block or Group Block for Visual Indentation

The Quote block automatically indents text with a left border and increased left margin — it is the fastest visual indentation option in Gutenberg. The Group block lets you wrap any content in a container where you can set left padding to push everything inside it to the right.

Method 2 — Create a Hanging Indent in WordPress

What Is a Hanging Indent and When Is It Used?

A hanging indent is the opposite of a standard indent — the first line stays at the left margin while all subsequent lines are indented. This is commonly used in bibliographies, reference lists, and legal citations.

CSS Method Using Text-Indent and Padding-Left Together

css

.hanging-indent {

  padding-left: 2em;

  text-indent: -2em;

}

Add this class to your post content by switching to the HTML view and wrapping your paragraph:

html

<p class=”hanging-indent”>Your hanging indented paragraph text goes here.</p>

Method 3 — Indent Text in the Classic Editor

Using the Increase and Decrease Indent Toolbar Button

In the Classic Editor, select your text and click the “Increase Indent” button in the toolbar (it looks like lines with an arrow pointing right). This wraps your text in a blockquote element, which most themes style with a left indentation.

Using the Blockquote Button for Indented Sections

The Blockquote button in the Classic Editor toolbar creates a visually indented block with a border — similar to the Quote block in Gutenberg. This is the fastest indentation option for pull quotes, notes, and callout sections.

Switching to HTML and Text Mode for Custom Indents

In the Classic Editor Text tab, you can use a div with an inline margin-left style for a custom indent width:

html

<div style=”margin-left: 40px;”>This paragraph is indented 40 pixels from the left.</div>

Method 4 — Indent Using HTML in WordPress

Using Blockquote for Block-Level Indenting

html

<blockquote>This text will be indented based on your theme’s blockquote styling.</blockquote>

Using a Div with Margin-Left for Custom Indent Width

html

<div style=”margin-left: 2em;”>This paragraph has a 2em left indent.</div>

Common HTML Indenting Mistakes and How to Avoid Them

Do not use multiple non-breaking spaces (&nbsp;) to create indents — it looks wrong on different screen sizes and is not semantic HTML. Do not use the <pre> tag for indenting regular text — it changes the font to monospace and preserves whitespace in a way that breaks paragraph flow.

Method 5 — Indent Using Custom CSS

CSS Properties for Text Indenting — Text-Indent, Padding-Left, Margin-Left

css

/* Indent the first line of all paragraphs in posts */

.entry-content p {

  text-indent: 1.5em;

}

/* Indent entire paragraphs from the left */

.indented-block {

  padding-left: 30px;

}

Targeting Specific Paragraphs, Classes, or Post Content Areas

Use the .entry-content class to limit indenting to post content only, keeping sidebars and footers unaffected.

Indenting Best Practices in WordPress

Consistency Across Desktop and Mobile

Whatever indentation you choose, check it on mobile. A 40px left margin on mobile can eat a significant portion of the screen width. Use em or % units instead of px for indentation that scales with screen size.

Avoiding Excessive Indentation on Small Screens

Consider using a media query to reduce or remove indentation on screens smaller than 600px:

css

@media (max-width: 600px) {

  .entry-content p {

    text-indent: 0;

  }

}

Indenting for Accessibility — What Screen Readers Expect

Screen readers do not read visual indentation — they read the HTML structure. Indentation created purely with spaces or visual padding does not communicate hierarchy to a screen reader. Use proper HTML elements like <blockquote>, <ul>, and <ol> when you need to express structural hierarchy.

Part 5: How to Edit the Primary Navigation Bar in Divi WordPress

How to Edit the Primary Navigation Bar in Divi WordPress

The Divi navigation bar is one of the most customized elements on Divi-built sites — and also one of the most confusing to edit because Divi gives you three different places to change it.

What Is the Primary Navigation Bar in Divi and Where Is It?

The primary nav bar in Divi is the horizontal menu bar at the top of your site. It contains your logo, main navigation links, and optionally a search icon or cart icon. It is controlled partly by WordPress menus (Appearance > Menus) and partly by Divi’s own settings.

Different Divi Header Formats — Which One Are You Using?

Divi offers several header formats: Default, Centered, Centered Inline Logo, Slide In, and Fullscreen. You can find your current format under Divi > Theme Options > Header & Navigation > Header Format. Your editing approach changes slightly depending on which format is active.

Three Ways to Access and Edit Divi Navigation Settings (Overview)

Method 1 is the WordPress Customizer (Appearance > Customize > Header and Navigation). Method 2 is Divi Theme Options (Divi > Theme Options). Method 3 is the Divi Theme Builder for fully custom headers.

Method 1 — Edit the Primary Menu via WordPress Customizer

Navigating to Appearance > Customize > Header and Navigation

Go to Appearance > Customize. In the left panel, look for “Header & Navigation.” This section controls the visual appearance of your nav bar — colors, font size, spacing, and more.

Changing Nav Bar Background Color, Font, Link Color, and Spacing

Inside “Header & Navigation,” look for “Primary Menu Bar.” Here you can change the background color, text color, active link color, and dropdown background color. For font settings, look for “Primary Menu Text” where you can adjust the font size property and font weight.

Configuring Sticky vs Fixed Header Settings

Divi supports a sticky header that remains visible as users scroll. Enable it under “Header & Navigation > Header Scrolling Effects.” You can also set a separate background color for the sticky header so it looks different from the full-size version at the top of the page.

Method 2 — Edit Navigation via Divi Theme Options

Accessing Divi > Theme Options > General > Navigation

Go to Divi > Theme Options > Navigation. This panel controls more structural elements — dropdown menu behavior, mobile menu display, and which menu is assigned to the primary location.

Controlling Dropdown Behavior, Mobile Menu, and Menu Depth

You can enable or disable dropdown shadows, choose how many menu levels deep to show in dropdowns, and configure the mobile hamburger menu appearance. The mobile hamburger menu color can be changed from gray to any color under the Navigation tab.

Creating and Assigning a Menu to the Primary Navigation Location

If your primary nav bar is empty, it is usually because no menu has been assigned to the “Primary Menu” location. Go to Appearance > Menus, select or create a menu, and check the “Primary Menu” box under “Menu Settings” at the bottom. Save.

Adding, Reordering, and Removing Menu Items

In Appearance > Menus, drag and drop menu items to reorder them. Click the arrow on any item to expand its settings — you can change the label, remove the item, or set it to open in a new tab. Nested items (placed slightly to the right under a parent item) become dropdown items.

Method 3 — Edit the Primary Navigation Bar Using the Divi Theme Builder

What Is the Divi Theme Builder and When Should You Use It?

The Divi Theme Builder (Divi > Theme Builder) lets you design a fully custom header using Divi’s visual drag-and-drop editor. Use this when the default Divi header options do not give you the layout you need — for example, a two-row header, a mega menu, or a header with custom HTML sections.

Creating a Global Header Template from Scratch

In the Theme Builder, click “Add Global Header.” Choose “Build Global Header.” The Divi Builder opens. From here you can add sections, rows, and modules just like building a regular page. Add a “Menu” module for your navigation links and customize it fully in the module settings.

Building a Custom Navigation Bar Using Sections and Modules

Add a one-column section. Inside it, add a row. Insert a “Menu” module and connect it to your WordPress primary menu. Use a “Text” or “Image” module alongside it for a logo. Style everything using Divi’s module design settings — colors, fonts, padding, and hover effects are all configurable.

Saving and Applying the Global Header Site-Wide

Click “Save Changes” in the Theme Builder. Divi will ask you to confirm applying the global header to all pages. Once confirmed, your custom header replaces the default Divi header across every page.

Advanced Divi Navigation Bar Customizations

Adding a Logo to the Navigation Bar

In Divi > Theme Options > General, upload your logo image. For Theme Builder headers, use an Image module placed in the same row as your Menu module.

Adding a Search Icon, CTA Button, or Phone Number to the Nav

In the default Divi header, enable the search icon under Divi > Theme Options > Header & Navigation > Primary Menu Bar > Show Search Icon. For a CTA button or phone number, use the Theme Builder and add a Button or Text module next to your Menu module.

Making the Navigation Bar Fully Responsive for Mobile

In the Theme Builder, click the mobile preview icon at the bottom of the screen. Check how your header looks on small screens. Use Divi’s responsive visibility settings on each module to hide certain elements on mobile if they are causing layout issues.

Customizing the Mobile Hamburger Menu

Under Divi > Theme Options > Navigation, you can change the mobile breakpoint at which the full menu collapses to the hamburger icon. You can also change the icon color using custom CSS:

css

.mobile_nav .mobile_menu_bar:before {

  color: #333333;

}

Styling the Divi Navigation Bar with Custom CSS

Where to Add Custom CSS in Divi

Go to Divi > Theme Options > General > Custom CSS, or use Appearance > Customize > Additional CSS.

Sample CSS Snippets for Common Divi Nav Bar Styling Changes

css

/* Change Divi nav background */

#main-header {

  background-color: #1a1a2e !important;

}

/* Change nav link color */

#main-header .nav li a {

  color: #ffffff !important;

}

/* Change nav link hover color */

#main-header .nav li a:hover {

  color: #00b4d8 !important;

}

/* Change dropdown background */

#main-header .nav li ul {

  background-color: #16213e !important;

}

Troubleshooting Common Divi Navigation Bar Issues

Menu Not Showing on the Primary Location

Go to Appearance > Menus and confirm a menu is assigned to “Primary Menu.” If a menu exists but is not assigned, check the “Menu Settings” checkbox at the bottom of the Menus editor.

Dropdown Menus Not Working on Mobile

This is often a JavaScript conflict from another plugin. Deactivate plugins one by one while testing to isolate the cause. Also confirm your Divi version is up to date.

Custom CSS Being Overridden by Divi Defaults

Divi uses high-specificity CSS selectors. If your styles are not applying, use browser DevTools to see which Divi rule is winning and write a more specific selector to override it.

Logo or Nav Items Not Aligning Properly

Check for conflicting margin or padding rules in the Theme Builder’s module settings. Use the row’s “Column Padding” settings to fine-tune alignment before reaching for custom CSS.

Quick Reference — All Methods at a Glance

Frequently Asked Questions

How Do I Change the Font Color for Just One Word in WordPress?

Use the Block Editor. Highlight the single word, click the text color option in the inline formatting toolbar, and pick your color. Alternatively, switch to HTML view and wrap the word in a span tag with a color style like <span style=”color: #ff0000;”>word</span>.

How Do I Change Link Color Without Touching CSS in WordPress?

Go to Appearance > Customize > Colors (or Typography depending on your theme) and look for a link color option. If your theme supports it, you can change link color there without writing any code.

Can I Add Google Fonts to WordPress Without a Plugin?

Yes. In WordPress 6.x with a block-based theme, go to Appearance > Editor > Styles > Typography > Manage Fonts and install Google Fonts directly. For older themes, add a Google Fonts import URL to your Additional CSS or use @font-face.

Why Does the Tab Key Not Work for Indenting Text in WordPress?

WordPress captures the Tab key to move keyboard focus between editor UI elements — this is an accessibility feature. To indent text, use the Block Editor’s padding settings, the Classic Editor indent toolbar button, or write a short HTML or CSS indent manually.

How Do I Make the Divi Navigation Bar Sticky on Scroll?

Go to Appearance > Customize > Header and Navigation > Header Scrolling Effects. Enable the “Shrink Fixed Navigation” option or “Fixed Navigation Background Color” to make your header stay visible as users scroll down the page.

Do Custom Fonts and Color Changes Slow Down My WordPress Site?

Custom fonts can affect load speed if loaded from external sources. Self-hosting fonts and using font-display: swap in your @font-face rule keeps performance strong. Color changes via CSS have negligible performance impact — CSS file size differences in the kilobyte range do not meaningfully affect load time.

Final Thoughts — Typography and Customization as a Branding Tool

How to change font color in WordPress is one of those topics that starts simple and gets deep fast. From a single span tag in the HTML editor to full custom CSS with browser DevTools, there are methods here for every skill level. The key takeaway is this: typography is not decoration. Font color, link color, font choice, and text layout all shape how visitors experience your content — and by extension, how much they trust your site.

For beginners, start with the Block Editor and the Theme Customizer. These tools give you the most bang for the least effort. For intermediate users, learn custom CSS — it gives you precision control that no visual interface can match. For Divi users, master the Theme Builder and you can build anything.

The next step is to open your WordPress dashboard right now and make one change. And if you would rather skip the trial and error entirely, TechoGiant handles WordPress typography, font setup, and full site customization so you do not have to.

Change one heading color, add one font, or update your link hover color. Small improvements compound quickly, and within a few sessions your site will feel like a completely different — and far more professional — place.