WP Thinker

The WordPress Playground

How to Change Font in WordPress

Change Font in WordPress

Decided to overhaul your WordPress website by changing the font for your content? Regardless of what you seek to achieve, the switch should be handled carefully. That’s because improper actions can affect the appearance, speed, and User eXperience (UX) design of websites or individual pages negatively. Fonts represent the basis of web pages. Further, they have been around since bare-bones websites ruled the internet over two decades ago. Since then, web designers had to incorporate text into the page’s design neatly—something you must also think about. We’ll leave the choice of font to you, and show you how to change a font in WordPress in general instead.

Before you start changing fonts for your website, know this

Although playing around with fonts can be fun, it may also be detrimental. Loading custom fonts can significantly reduce page loading speed, on top of looking out of place, unprofessional, even illegal if you don’t have a license. Make sure form and function go hand in hand when choosing a font. In other words, pick one that looks good but is also optimized and licensed for web use.

1. Switching WordPress font using Theme Customizer

As usual, we’re starting with the best-case scenario or the most convenient option for beginners and advanced users alike. If your active WordPress theme supports adjusting fonts via Theme Customizer, this method is both. You don’t need to know how to code or upload fonts. Since we can’t cover all themes that fall into this category, we’ll use a well-known example: the Astra theme. Follow these steps to change the font on WordPress through Live Preview (Theme Customizer):

  1. Head over to your WordPress Admin section.
  2. Go to Appearance in the sidebar on the left-hand side.
  3. Select Customize.
  4. You’ll be taken into the front-end of your website with a list of options on the left-hand side.
  5. Search for the “Fonts” or “Typography” option. On Astra in particular, go to Global → Typography.
  6. Go to General, and you’ll see several preset options of web-friendly fonts that look good with the theme. Moreover, you can choose one of many web fonts under “Body Font Family”, and choose a variant (Bold, Italic, Regular, or combinations) size, weight, spacing, and more. Additionally, you can see how the change looks in real-time on the right-hand side.
  7. Optional. Many WordPress website owners don’t want to change the global font, only adjust individual aspects such as heading or paragraph. If that’s you, go to Headings, then decide which heading it should apply to (H1-H6) under the “Font Family” section below. Adjust other font-related details.
  8. Click on Publish once you’re satisfied with the alterations you made.

2. Install a WordPress plugin to set a new font on WordPress

It surprises no one there’s a way to eliminate coding or reliance on theme developers for altering the font—installing a plugin for WordPress. Even better, they frequently let you preview changes before you decide and support web fonts. This means you don’t need to upload anything (this has downsides in terms of slower loading speed, unsurprisingly). A great beginner-friendly example of that is Easy Google Fonts by Titanium Themes. Here’s what to do:

  1. Install and activate the plugin above.
  2. Go to Appearance → Customize again.
  3. Open the Typography option and choose the element you want to modify, such as “Paragraphs” or “Heading 1”-“Heading 6”.
  4. Start making changes in the “Font” tab:
    1. First, go for a new Google Web Font under “Font Family”. The plugin currently supports 500+ Google Fonts.
    2. Tip. Use the page to quickly discover one or more fonts that look good together. Memorize the style, such as “Roboto Medium 500”. Then, use the plugin to examine whether it looks good on your website.
    3. Make additional modifications, such as picking a different language, weight, style, decoration, and transform.
  5. Head over to the “Style” tab to modify color, background color, size, line height, and more.
  6. Unless you need to rearrange text placement, leave the “Position” tab alone.
  7. Click the Publish button to save changes.

3. Change font for your WordPress website using CSS

CSS or Cascading Style Sheets is a style sheet language responsible for the way pages on your website look on the front-end. We have already gone over the procedure of editing CSS in WordPress, so you’ll have no trouble finding the necessary files. For extensive changes such as changing a global font or only for specific pages, we suggest contacting the theme developer. However, if all you need is to tweak the appearance of certain elements, yet the theme doesn’t support it, or you don’t feel like piling on plugins, there’s a quick and safe solution. Depending on your goal, you can:

Transition to standard fonts for the web

For this to work without uploading custom fonts, you must pick a standard one, such as Verdana, Helvetica, Arial, and so on. Additionally, if you employ this technique, changes will disappear when you switch your WordPress theme unless you use a code snippet plugin. Start by opening the Live Preview tab like above. Then, find the Additional CSS option at the bottom. In the empty text field, add, for example,

h1{
font-family: arial;
font-size: 28px;
color: #FF0000;
}

This will make all h1 headings colored black and 28 pixels in size. You can tweak the number to your liking and pick a different hex color code. Likewise, you can change the settings for h2-h6 and place codes below this one. This applies to paragraphs, which might be named “body” or “p”. Furthermore, if you like your current paragraph font, for instance, simply leave out the font-family line, so it looks like this:

h1{
font-size: 18px;
color: #FF0000;
}

Employ custom web fonts

You can also spice up your website with the aforementioned Google Fonts. To incorporate them without a plugin, you’ll need to utilize what’s called wp_enqueue. Here’s how that works:

  1. Visit the Google Fonts page we linked above and find one you like. Click on Select this style.
  2. Under “Use on the web” switch to the @import tab and copy the URL with quotes, such as ‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap’
  3. Now, head over to the functions.php file (use the CSS guide above to find it).
  4. Add this script at the bottom, making sure to replace it with your URL:
function add_my_font() {
wp_enqueue_style( ‘add_my_font’, ‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap’, false );
}
add_action( ‘wp_enqueue_scripts’, ‘add_my_font’ );

All that’s left is to “declare” the places the newly added font should apply. Using the same guide, find the style.css file or use a custom CSS plugin. At the top of the document, either change the existing code (if you don’t want to use that font anymore) or, if undefined, add a new one:

.body, .h1, .h2, .h3, .h4 {
font-family: ‘Roboto’, sans-serif;
}