How to Adjust Fonts in Kadence WordPress Theme

Knowing how to adjust fonts in Kadence for WordPress is necessary to provide your readers with a good user experience. Many WordPress designers use fonts to enhance their brand or to make their site look unique, but the most important thing is to make your site legible and accessible.

How do I adjust fonts in Kadence?

To adjust fonts in Kadence, open Appearance → Customize → Typography, choose the element (Base, Heading, etc.), and set your font family, size, weight, and spacing. Use the responsive controls for mobile. Publish to save.

image of old typesetting box to illustrate that this post is about how to adjust fonts in kadence wordpress theme

Affiliate Disclosure: This post may contain affiliate links, which means I receive a small commission at no cost to you when you make a purchase. Please note that I only get affiliate links for products that I use.

Screenshot of the typography section of the Kadence customizer

How to adjust fonts in Kadence (Step by Step)

  1. Access the Customizer: To start, log in to your WordPress website dashboard. Navigate to ‘Appearance' and then click on ‘Customize'. This opens the WordPress Customizer, where you can make live edits to your site.
  2. Go to Typography Settings: In the Customizer, you'll find an option for ‘Typography'. Click on it. Kadence neatly organizes typography settings, allowing you to adjust font settings for different areas of your site like body text, headers, menus, etc.
  3. Choose the Area to Customize: Select the area where you want to change the font. For example, if you want to change the font of your main body text, look for ‘Base Font'. If it's the headers, then select the respective header (H1, H2, H3, etc.) typography settings.
  4. Select the Font and Customize: Once you've chosen the area to customize, you can select the font. Kadence offers a wide range of fonts to choose from, including hundreds of Google fonts. Click on the drop-down menu to see all available fonts. After selecting a font, you'll typically have options to adjust the font weight (how bold it is), style (italic, normal), and size. You can also choose the color that you want your fonts to be: for example, if you want all of your H2 headlines to be blue, you can assign the color here.
  5. Adjust Line Height and Letter Spacing: For a more polished look, you can also adjust the line height (the space between lines of text) and letter spacing (the space between individual letters).
  6. Preview and Publish: As you make changes, you can see a live preview of how they look on your site. This is a great feature because it lets you experiment and see the results in real time. Once you're happy with the way your fonts look, click ‘Publish' to save your changes.
  7. All of the settings in the customizer are global, meaning that they will be updated on every single page. You can override global settings on the individual pages.

The choice of font can significantly impact the readability and overall aesthetic of your WordPress site. I recommended that you keep font choices minimal—perhaps one font for your headers and another for your body text. Too many different fonts can make a site look cluttered and confuse your readers.

Also, consider the loading times; some fonts, especially the fancier ones, can slow down your site a bit. Kadence is great at optimizing for performance, but it's still something to keep in mind.

Adjusting fonts in Kadence for Mobile Devices

Adjusting fonts specifically for mobile devices in the Kadence theme involves a similar process to adjusting them for the desktop version, with a few additional steps to ensure that your site looks great on smaller screens. Here's how you can do it:

font settings

Kadence is a responsive theme, meaning that it automatically adjusts the sizes of the elements of a site so that they appear correctly on mobile. But many times the headings may break in the middle of a word, so it's always a good idea to check your site on a mobile device and make your changes to fix these issues.

  1. Access the Customizer: First, log in to your WordPress dashboard. Go to ‘Appearance' and then ‘Customize' to open the WordPress Customizer.
  2. Navigate to Typography Settings: In the Customizer, find the ‘Typography' section. This is where you can manage all font-related settings.
  3. Select the Area to Customize: Choose the area where you want to adjust the font (like body, headers, or menu). You'll typically have options for different aspects of typography like font family, size, weight, style, etc.
  4. Adjust Font Size for Mobile: When you're adjusting font sizes, Kadence often provides responsive controls. These are usually represented by desktop, tablet, and mobile icons. By selecting the mobile icon, you can set a specific font size for mobile devices. This allows you to fine-tune how text looks on smaller screens, ensuring readability and a good user experience.
  5. Fine-Tune Other Font Attributes if Needed: Similarly, you can adjust line height and letter spacing for mobile views. This is particularly important as text can appear very different on a mobile device compared to a desktop screen.
  6. Use the Live Preview for Mobile: The Customizer in WordPress allows you to preview your site as it would appear on desktop, tablet, and mobile devices. Use the mobile view icon (usually represented by a small mobile phone icon) to see how your font adjustments look in real-time on a mobile device.
  7. Always check on an actual phone! It will probably look different from the mobile customizer on a desktop computer!
  8. Publish Your Changes: Once you're satisfied with how your fonts look on mobile, click ‘Publish' to save your changes.

Always check how your site looks on various devices, especially after making changes like font size settings. Mobile responsiveness is crucial for user experience and for SEO purposes, as search engines often The goal with mobile typography is clarity and readability. Since mobile screens are smaller, fonts might need to be slightly larger, and spacing may need to be adjusted to ensure your text is easy to read on the go.

Common Mistakes Beginners Make When Adjusting Fonts in Kadence

Using Too Many Fonts at Once

It’s tempting to pick a different font for every mood (trust me, I’ve been there). But mixing too many fonts makes your site feel chaotic and slows load time. Stick to one font for headings and one for body text for a clean, professional look.

Choosing Fonts That Are Too Small

Many beginners shrink text to “fit more on the page,” but tiny fonts are a fast track to high bounce rates. Start body text at 16–18px, and adjust upward if your audience leans older or reads on mobile often.

Ignoring Responsive (Mobile) Typography

Kadence is responsive, but that doesn’t mean your fonts magically look perfect on every device. Beginners often forget to check the mobile icon in Typography controls—leading to giant headlines or words breaking mid-line. Always review mobile settings separately.

Using Ultra-Thin Font Weights

Thin fonts (100–200) may look elegant on retina screens… and like faint pencil scratches on older devices. They’re also harder to read for low-vision users. Stick with 300–500 for body text and 600–700 for headings.

Changing Fonts but Forgetting to Clear Cache

One of the most common issues: “Why isn’t my font changing?!”
Usually it’s just caching. After editing typography, clear:
• Your caching plugin
• Your CDN (if you use one)
• Your browser cache

Not Checking Real Device Previews

The Customizer’s mobile preview is a nice suggestion, but it doesn’t always match real devices. Always check on:
• An actual phone
• A tablet (if available)
Typography often shifts slightly in real environments.

Using Too Many Font Weights

Every extra weight (300, 400, 500, 700, etc.) adds to load time. Beginners often enable all of them because “options!” Stick to 2–3 weights max unless you’re doing something highly design-focused.

Forgetting About Line Height and Spacing

Changing font size alone isn’t enough. Without proper line height (1.5–1.7) and letter spacing, even great fonts can look cramped or jittery. A few small spacing tweaks go a long way toward clean readability.

Picking Fonts Based on Aesthetics Alone

Pretty doesn’t always mean readable. Choose fonts with:

  • Good contrast
  • Clear letter shapes
  • Enough weight variation
  • Reliable browser rendering
  • Your audience’s eyes will thank you—and so will your bounce rate.

Key Takeaways

  • Kadence lets you adjust fonts globally through the Customizer, with separate controls for desktop, tablet, and mobile.
  • Stick to one header font and one body font to keep your site clean and accessible.
  • Always preview your typography on an actual mobile device—not just the Customizer.
  • Use proper line height and spacing to improve readability and boost user experience.
  • Fancy or multiple fonts can slow pages down, so balance style with performance

Open Appearance → Customize → Typography, choose the element (Base, Heading, etc.), select your new font family, adjust size and weight, then click Publish.

This usually happens because of:
• CSS caching
• A caching plugin not being cleared
• Styles overridden in Customizer → Additional CSS
• Clear your cache and re-check. If it still doesn’t update, review any custom CSS.

Yes — but only through Kadence Pro or a plugin like Use Any Font or Custom Fonts. The free Kadence theme does not have built-in custom font upload.

A good baseline for readability is:
• Body text: 16–18px
• Headings: Scaled consistently (H1 largest → H6 smallest)
• Aim for a line height of 1.5–1.7 for comfortable reading.

Kadence uses responsive controls, so your mobile size may be set differently than desktop. In Typography settings, click the mobile icon to adjust mobile-only font sizes.

Hey there!

I'm Diane Houghton and I've been working with WordPress for 20 years. I can code a website using HTML, CSS and PHP, but I'd rather drag and drop designs from my own custom Kadence Library.

I have built websites for dozens of small businesses, and now my focus is on teaching. I have taught 1000+ WordPress beginners to build, design and optimize their blogs.

Diane Houghton, owner at WP Basics Guide

thumbnail ultimate wordpress cheat sheet
Download the pdf now!

Get your FREE Ultimate WordPress Cheat Sheet!

A 30 page guide to the WordPress dashboard

🚀 Definitions of common WordPress terms

💡 Tips on uploading images, creating a menu and more

🔧 List of common Gutenberg blocks and what they do

🔍 SEO and Security tips

Similar Posts