How to change fonts in Client Portal

Overview

If you're using custom fonts from Google Fonts, Adobe Fonts, or another provider, you can have these display in Client Portal by adding some CSS. This guide focuses on font-specific selectors and examples.

New to custom CSS in Client Portal? See How to customize your portals with custom CSS to learn where to add CSS code, how to find portal IDs, and how to target specific portals.

If you need help adding custom fonts to your WordPress website first, this WPBeginner guide will show you how to do that.

Quick Start: Change all fonts

Paste the following CSS into your Custom CSS field (see How to customize your portals with custom CSS for where to add it) and replace 'Merriweather' with your font name:

Five theme (Block editor)

.leco_client-template-default,
.leco_client-template-default h1,
.leco_client-template-default h2,
.leco_client-template-default h3,
.leco_client-template-default h4,
.leco_client-template-default p,
.module .title,
.phase-title,
.leco-cp-phase-text {
    font-family: 'Merriweather', serif !important;
}

Legacy theme (Classic editor)

.leco_client-template-default,
.leco_client-template-default h1,
.leco_client-template-default h2,
.leco_client-template-default h3,
.leco_client-template-default h4,
.leco_client-template-default h3,
.leco_client-template-default p,
.phase-title,
.project-item {
    font-family: 'Merriweather', serif !important;
}

Want to apply fonts to only one portal? See How to customize your portals with custom CSS to learn how to target specific portals using portal IDs.

Selector reference

Use these selectors to target specific elements in your portals.

Phase titles

Selector	What it changes
`.phase-title`	Phase heading (e.g., "Phase 1: Discovery")
`.leco-cp-phase-text`	"PHASE 1" label text (Five theme)
`.phase-title span`	"PHASE 1" label text (Legacy theme)

Modules

Selector	What it changes
`.module .title`	Module title (Five theme)
`.module .description`	Module description text (Five theme)
`.project-item`	Module card text (Legacy theme)

Content pages

Selector	What it changes
`.leco-cp-content`	Main content area
`.leco-cp-content h1`	Content page H1 headings
`.leco-cp-content h2`	Content page H2 headings
`.leco-cp-content h3`	Content page H3 headings
`.leco-cp-content p`	Content page paragraphs
`.leco-cp-sidebar a`	Sidebar navigation links

Project status blocks

Selector	What it changes
`.wp-block-leco-cp-project-status-block .value`	Status value (e.g., "75%")
`.wp-block-leco-cp-project-status-block .label`	Status label (e.g., "Complete")

Forms & buttons

Selector	What it changes
`label`	Form field labels
`.btn`	Buttons
`button`	All button elements
`input[type="submit"]`	Submit buttons
`input[type="text"]`	Text input fields
`input[type="email"]`	Email input fields
`textarea`	Text area fields

Comments (Five theme)

Selector	What it changes
`.comments-area .comments-title`	"Comments" heading
`.comment-author`	Commenter names
`.comment-content`	Comment text

Common examples

Change phase titles to uppercase with different font

.phase-title {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

Change module titles and descriptions

.module .title {
    font-family: 'Lora', serif !important;
    font-weight: 600;
}

.module .description {
    font-family: 'Open Sans', sans-serif !important;
}

Use different fonts for headings vs body text

/* Headings */
.phase-title,
.module .title,
.leco-cp-content h1,
.leco-cp-content h2,
.leco-cp-content h3 {
    font-family: 'Playfair Display', serif !important;
}

/* Body text */
.leco_client-template-default p,
.module .description,
.leco-cp-content {
    font-family: 'Source Sans Pro', sans-serif !important;
}

Style buttons with a custom font

.btn,
button,
input[type="submit"] {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Tips

Always include a fallback font (e.g., serif or sans-serif) after your custom font name
Use !important to ensure your styles override the defaults
Test your changes on both desktop and mobile devices
If your font name contains spaces, wrap it in quotes: 'Open Sans'
Make sure your custom font is loaded on your WordPress site before adding CSS
Clear your browser cache and any WordPress caching plugins after making changes

Some selectors may not work with all themes or plugin versions. If a selector doesn't apply, use your browser's inspect tool to find the correct class name.

Troubleshooting

My font isn't changing

Verify the font is properly loaded on your WordPress site
Check that you're editing the correct Custom CSS field (Five vs Legacy theme)—see How to customize your portals with custom CSS for details
Make sure you're using !important in your CSS rules
Clear all caches (browser, WordPress plugins, hosting)
Use your browser's inspect tool to verify the CSS is being applied

Font works on desktop but not mobile

Some fonts require additional @font-face declarations for mobile
Check that your font provider (Google Fonts, Adobe Fonts) supports mobile devices
Test with a simple system font first to rule out CSS selector issues

Finding the right selector

Right-click the element you want to change on your portal
Select Inspect or Inspect Element
Look at the HTML and classes in the developer tools panel
Use those class names in your CSS

Was this helpful?