Changing fonts in WordPress is simple with the right tools and methods. Whether you’re using the block editor, a theme customizer, or custom CSS, this guide walks you through every option to help you personalize your site’s typography with confidence.
Key Takeaways
- Use the WordPress Block Editor: Change fonts directly in posts and pages using the built-in typography settings in Gutenberg.
- Customize via Theme Options: Many modern themes offer font controls in the Customizer under “Typography” or “Site Identity.”
- Add Custom CSS: For full control, use the Additional CSS section to apply font styles across your entire site.
- Install Font Plugins: Plugins like Easy Google Fonts or OMGF help integrate and manage web fonts easily.
- Choose Web-Safe Fonts: Ensure your selected fonts are supported across devices and browsers for consistent display.
- Test on Mobile: Always preview font changes on different screen sizes to maintain readability and design balance.
- Use Child Themes for Safety: When editing theme files, always use a child theme to preserve changes during updates.
How to Change Font in WordPress
If you’re looking to give your WordPress website a fresh look, changing the font is one of the quickest and most impactful ways to do it. Whether you’re aiming for a modern, elegant, or playful vibe, typography plays a huge role in shaping your site’s personality. The good news? You don’t need to be a coding expert to change fonts in WordPress. With a few simple steps, you can update your site’s text style using built-in tools, plugins, or custom code.
In this guide, we’ll walk you through multiple methods to change fonts in WordPress—from beginner-friendly options like the block editor to more advanced techniques like adding custom CSS. By the end, you’ll know exactly how to customize your site’s typography to match your brand and improve user experience.
Method 1: Change Font Using the WordPress Block Editor (Gutenberg)
The WordPress Block Editor, also known as Gutenberg, makes it easy to change fonts on individual posts and pages. This method is perfect if you only want to adjust fonts in specific content areas.
Step 1: Open the Post or Page
Log in to your WordPress dashboard and go to Posts > All Posts or Pages > All Pages. Click on the content you want to edit.
Step 2: Select the Text Block
Click on any paragraph, heading, or text block you’d like to modify. You’ll see a toolbar appear above the block.
Step 3: Open Typography Settings
In the right-hand sidebar (or in the block toolbar), look for the Typography section. If you don’t see it, click the three-dot menu (⋮) and select “Block” to expand settings.
Step 4: Choose a Font Family
Under “Font Family,” you’ll see a dropdown list of available fonts. These include default system fonts like Arial, Georgia, and Times New Roman, as well as any Google Fonts your theme supports. Simply click and select the font you want.
Step 5: Adjust Font Size and Weight (Optional)
You can also change the font size, line height, and font weight (like bold or light) from the same panel. Use the sliders or type in custom values.
Step 6: Save Your Changes
Once you’re happy with the look, click Update (for pages) or Publish (for new posts) to save your changes.
Pro Tip: This method only affects the selected block. If you want to change fonts site-wide, keep reading for better options.
Method 2: Change Font Using the WordPress Customizer
Visual guide about How to Change Font in WordPress
Image source: ryrob.com
The Customizer is a powerful tool that lets you preview changes in real time before publishing them. Many modern themes include typography settings here.
Step 1: Access the Customizer
Go to Appearance > Customize in your WordPress dashboard.
Step 2: Look for Typography or Font Settings
Depending on your theme, you might see options like:
– Typography
– Site Identity
– Global Styles
– Theme Options
For example, themes like Astra, GeneratePress, or Kadence include dedicated font controls.
Step 3: Select Fonts for Different Elements
You can usually set different fonts for:
– Body text
– Headings (H1, H2, etc.)
– Buttons
– Navigation menus
Click on each section and choose your preferred font from the dropdown. Some themes also let you adjust font size, color, and spacing.
Step 4: Publish Your Changes
When you’re satisfied with the preview, click Publish at the top to apply the changes site-wide.
Note: If your theme doesn’t have font options in the Customizer, consider switching to a more flexible theme or using a plugin (see Method 4).
Method 3: Change Font Using Custom CSS
For full control over your site’s typography, custom CSS is the way to go. This method works with any theme and allows you to apply fonts globally.
Step 1: Go to Additional CSS
In your WordPress dashboard, navigate to Appearance > Customize > Additional CSS.
Step 2: Add CSS Code
Here’s an example to change the body font to “Roboto”:
body {
font-family: 'Roboto', sans-serif;
}
To change heading fonts:
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}
Step 3: Import Google Fonts (If Needed)
If you’re using a Google Font like Roboto or Montserrat, you’ll need to load it first. Add this line at the top of your CSS (replace with your font name):
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
Alternatively, you can add the font link to your theme’s <head> section via a plugin or your child theme’s functions.php file.
Step 4: Save and Test
Click Publish to save your CSS. Then visit your site to see the changes.
Pro Tip: Always use a child theme when making code changes to avoid losing them during theme updates.
Method 4: Use a Font Plugin (Recommended for Beginners)
If you’re not comfortable with code, a plugin can simplify the process. Here are two popular options:
Option A: Easy Google Fonts
This plugin integrates Google Fonts directly into the WordPress Customizer.
– Install and activate Easy Google Fonts from Plugins > Add New.
– Go to Appearance > Customize > Typography.
– You’ll now see a full list of Google Fonts. Select fonts for body, headings, and other elements.
– Adjust size, weight, and spacing as needed.
– Click Publish to apply.
Option B: OMGF (Optimize My Google Fonts)
OMGF not only lets you manage Google Fonts but also improves site speed by locally hosting them.
– Install and activate OMGF.
– Go to Settings > OMGF.
– Choose which Google Fonts to download and optimize.
– The plugin automatically replaces remote font calls with local files.
This method is great for performance and privacy.
Troubleshooting Common Font Issues
Even with the best setup, you might run into problems. Here’s how to fix them:
Font Not Changing?
– Clear your browser cache and WordPress cache (if using a caching plugin).
– Check if your theme or another plugin is overriding the font settings.
– Ensure the font name is spelled correctly in CSS (e.g., ‘Open Sans’ not ‘OpenSans’).
Font Looks Different on Mobile?
Use responsive CSS to adjust font sizes:
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
Google Fonts Not Loading?
– Make sure the @import URL is correct.
– Check if your hosting blocks external requests (rare, but possible).
– Consider using OMGF to host fonts locally.
Changes Disappeared After Theme Update?
This happens when you edit theme files directly. Always use a child theme or the Additional CSS section to preserve your work.
Best Practices for Choosing Fonts
– Limit to 2–3 fonts: Too many fonts can make your site look messy.
– Prioritize readability: Choose clean, legible fonts for body text.
– Check licensing: Ensure commercial fonts allow web use.
– Test across devices: Fonts may render differently on Windows, Mac, iOS, and Android.
Conclusion
Changing fonts in WordPress doesn’t have to be complicated. Whether you’re using the block editor for quick tweaks, the Customizer for theme-based changes, or custom CSS for full control, there’s a method that fits your skill level. For most users, combining the Customizer with a plugin like Easy Google Fonts offers the best balance of ease and flexibility.
Remember to always preview your changes and test on mobile devices. And if you’re making code edits, protect your work by using a child theme. With the right font, your WordPress site can look more professional, engaging, and aligned with your brand.
Ready to upgrade your site’s design? Start experimenting with fonts today—and watch your content come to life.