rosstek / stock.adobe.com
While it can seem like a small detail to some, font choice is a key part of web design and brand identity. Unfortunately, the process to change a font in WordPress is not as straightforward as you might assume. Your WordPress theme significantly influences the options at your disposal, and out of the box, there are actually only a few ways to tweak your site’s typography.
The good news is that, regardless of whether you can code, there are tools that can help you switch up your font choices, regardless of your theme. With these resources at your fingertips, you can make sure your site matches your branding and looks modern, classy, and professional.
In this post, we’ll discuss how to change a font in WordPress, and cover a few methods of doing so. Before that, let’s quickly talk about your default options, and why your site’s typography matters.
In This Article 📜
Why Font Choice Is Important In Web Design 🎨
On the surface and to an untrained eye, web design might seem like a fairly straightforward process. Choose a color scheme you like, pick a font or two, set up a navigation menu, and there you have it, right?
Unfortunately, it’s nowhere near that simple. Effective web design takes not only aesthetics, but also aspects of marketing, psychology, and usability into consideration. It’s just as much about understanding how users will perceive certain elements as it is about personal preferences.
Font choice, specifically, impacts web design in two major ways. First, it’s vital from a usability perspective. If your site features a typeface that is extremely difficult to read, you’ll have a hard time achieving the primary goal of any online content – conveying information to visitors.
How legible your font is will influence whether visitors stick around and learn more about your brand, or abandon your site out of frustration and turn to a competitor instead. It also plays a role in your site’s accessibility, as small type and fancy scripts can both be difficult for visually impaired users and those with dyslexia to decipher.
The second way font choice impacts the quality of your site’s design is when it comes to branding. Although we often focus mostly on the substance of text-based content, it’s also smart to consider it from a visual perspective. You want to set the right tone for your site.
All this goes to say that if you’ve found the perfect WordPress theme but its default font is either difficult to read or doesn’t fit with your brand identity, it’s well worth the effort to change it.
Understanding WordPress' Default Font Choices 💡
Very often, new users are drawn to WordPress because of how easy it is to personalize compared to other Content Manage Systems (CMSs) and website builders. However, the platform elicits complaints from time to time – most notably about out of the box customization options, or the lack thereof.
For example, if you open the WordPress Customizer for the default Twenty Twenty theme and attempt to change your site’s font, you’ll be sorely disappointed. There’s no such option available:
If you dig deeper, you’ll find that this apparent shortcoming is actually the source of WordPress’ power. Its core codebase isn’t designed to be ‘all-singing, all-dancing’. It’s actually meant to give you a solid base to work from that’s stable, secure, and a blank canvas for your site.
Sure, you can use WordPress and a default theme just fine. However, if you think there should be more on offer out of the box, you’re missing a key trick.
[bctt tweet=”📠 WordPress’ core codebase is a blank canvas to customize however you want, not bloated software with infinite options. #WordPress” username=”thewpbuffs”]
The real strength of WordPress lies in its extendability through its themes, plugins, hooks, and filters. As such, the world is your oyster when it comes to the ability to customize your site, but it’s up to you to choose how you do it.
How to Change a Font in WordPress (3 Potential Methods) 👛
Fortunately, you’re not stuck with WordPress’ default theme. In fact, there are plenty of ways to change a font in WordPress, and for most of them, you won’t need to know a line of code. Let’s start with the most common solution, then look at a few alternatives, including:
1. Check Out Your Theme or Page Builder’s Font Options
If you’re like many others coming to WordPress, you won’t be using a default theme for your site. While they’re well-coded and high-quality, they’re best for simple sites and are more ‘concept pieces’ than business-ready site layouts.
In other words, you’re going to need to choose a specific theme to meet your needs. Premium options tend to offer the most in terms of features and customization, although there are some free solutions with decent range.
[bctt tweet=”👩🏾🎨 Many premium themes will offer a full range of fonts, with easy access and application. #WordPress” username=”thewpbuffs”]
Many premium themes, especially those found on ThemeForest, will contain a way to access the entire suite of Google Fonts. Alternatively, some developers choose to incorporate more tailored selections based on the overall designs of their themes.
Your theme is likely going to offer two ways to change a font in WordPress. The most common is through the Customizer’s menu options. Other themes come with dedicated admin panels that lay out all your design choices:
This is simple enough to navigate. You’ll access the options and select your chosen fonts from the relevant dropdown menus. The changes should display immediately, although you may need to refresh your preview page to see your new fonts in action.
The same applies to page builder plugins. You’ll find similar options in many of the most popular tools, such as Beaver Builder, Elementor, and others. This bridges the gap between your theme’s options and our next method – using a dedicated plugin.
2. Install and Activate One of the WordPress Font Plugins
It may be the case that your theme doesn’t offer your desired font. If you’re also averse to page builders and have little coding experience, a dedicated font plugin is probably the way to go.
There are two common flavors – font embedding plugins, and ‘uploaders’. Plugins that embed fonts in your website usually pull from dedicated directories such as Google Fonts, as is the case with Google Fonts Typography.
OMGF | Host Google Fonts Locally offers the option to rewrite the fonts you are already loading to use local URLs
Or you can hire OMGF to optimize your fonts for you.
There are also embedding plugins for users of Typekit, Adobe’s subscription collection of fonts:
As you may expect, installing and activating these plugins is just like any other. However, you may find there are extra steps to connect Google and Adobe’s servers to your site. The upside to this extra step is that it helps bypass many of the processes required to implement font choices manually.
Font uploader plugins are slightly different. Rather than embed fonts from other sources, these tools let you upload a specific font to your site and use it as you would a typeface included in your theme. If you have a custom font in mind for your site, the Use Any Font plugin may be right up your alley.
If you’ve found the ideal font via a source such as DaFont or MyFonts, this plugin will enable you to use it without having to touch your site’s code.
But at the end of the day, the simplest way to change a font on your WordPress site is still with the Google Fonts Typography plugin.
3. Add WordPress Custom Fonts Through Simple Coding
Finally, we have the manual option for changing a font in WordPress. This method does require some coding knowledge, but it’s not particularly advanced and should be learnable enough for intermediate users.
Of course, this isn’t going to provide you with swathes of fonts to choose from like a premium theme or a dedicated plugin. However, it enables you to keep bloat to a minimum while letting you implement the font you’d like on your site.
Before you begin, you’ll need the following:
- A font of your choosing
- Knowledge of Cascading Style Sheets (CSS)
- Access to your WordPress core files
- File Transfer Protocol (FTP) knowledge, and a suitable client such as FileZilla or Cyberduck.
From here, there are a couple of methods. The simplest is to click the Embed tab and copy the code into your site’s section.
However, the correct way for WordPress websites to embed fonts is through ‘enqueuing’. The first step in this process is to copy the link to your fonts. In our example, it’ll be the following (including the single quotes):
'https://fonts.googleapis.com/css2?family=Oswald:wght@200;700&display=swap'
Next, access your WordPress website’s files via FTP. The file you’re after is functions.php, which should be in your child theme’s root directory:
Open it, then enter the following code, replacing our link with the one for your chosen font:
function add_my_font() {
wp_enqueue_style( 'add_my_font', 'https://fonts.googleapis.com/css2?family=Oswald:wght@200;700&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'add_my_font' ); You’ll now need to ‘declare’ where your fonts are going to be used. The simplest approach is to open up your theme’s style.css file – again in your child theme’s folder alongside your functions.php file – and add the following:
.body, .h1, .h2, .h3, .h4 { font-family: 'Oswald', sans-serif; }
This essentially tells your front end that you want to use this specific font. Note that you could remove some of these declarations if you only wanted the new font to apply to certain sections. For example, it’s common to use different fonts for headings and body text. This is easy to do using CSS.
However, best practices change a lot, and your theme may not accept these declarations depending on how it’s been coded. If you’re struggling, you may want to get in touch with your theme’s developer to ask for help, or choose a method for changing a font in WordPress that’s more straightforward.
Wrapping Up 🎬
When you’re first looking to use WordPress to publish your website, you’ll potentially see a disconnect between what you’ve heard about its customization options and what you’re presented with by default. However, WordPress’ flexibility lies in the additional functionality plugins and themes bring to the virtual table, not what’s been added out of the box.
In this post, we’ve looked at three ways you can change a font in WordPress. Let’s recap them quickly:
- Check out your theme or page builder’s font options.
- Install and activate one of the WordPress font plugins.
- Add WordPress custom fonts through simple coding.
If you’re still at a loss as to how to change a font in WordPress, we may be able to help. At WP Buffs, we provide WordPress Care Plans that include c ontent updates as well as custom code monitoring. Check them out today!
Want to give your feedback or join the conversation? Add your comments 🐦 on Twitter!
Featured image: Pixabay.
