How To Change Fonts In WordPress 2024 (FAST & Easy!)

It might seem like a small detail, but WordPress fonts can significantly impact the user experience.

Fonts are so powerful that choosing the right one can enhance the look and feel of your website, while a poor choice can detract from it. That’s how important they are in your website design and brand identity.

So, when you’ve selected a particular font, you also need to know how to change fonts in WordPress.

There are multiple ways to change fonts in WordPress, depending on your theme. You may need to use plugins or make changes manually.

Whatever the case, we will discuss every aspect in this blog so you can choose the method that best fits your needs. Let’s get straight to the point without further delay.

---

---

---

---

---

1. Changing Fonts in WordPress using the Theme customizer

The easiest and fastest way to change fonts is by using the WordPress theme customizer. This build tool will let you make changes to the appearance of your website and see it in real-time.

Note: In case, the customizer option is not available or missing, your theme might use full site editing. In this case, you’ll need to try a different method or switch to another theme.

In this tutorial for your convenience, we are going to use Astra, since it is the most popular and widely used WordPress theme available.

But you also keep in mind that the options might be different depending on your theme. Generally, you should look for options like  ‘Font’ or ‘Typography’ in the customizer option.

But for now, let’s see how you can Change Fonts in WordPress:

1.1. Open the Customizer:

   – Go to your WordPress dashboard.

   – Navigate to Appearance > Customize.

1.2. Access the Global Settings:

   – This will open the WordPress theme customizer.

   – In the Astra theme, find and click on the ‘Global’ section to access options for changing the overall style of your website.

1.3. Select Typography Settings:

   – You’ll see options like ‘Typography,’ ‘Colors,’ ‘Container,’ and ‘Buttons.’

   – Click on ‘Typography.’

1.4. Choose a Font Preset:

   – Under the ‘Presets’ section, you can pick different font combinations with your theme. Hover over each preset to see the font combination (e.g., ‘Montserrat and Source Sans Pro’).

   – Click on a preset to apply it to your entire website.

1.5. Customize Fonts for Individual Elements:

   – To change fonts for specific elements (like body text or headings), select a font from the ‘Font Family’ dropdown menu.

   – You can use different fonts for body text, headings, or even for each heading level (e.g., H1, H2).

1.6. Adjust Additional Font Settings:

   – You can also adjust font size, weight, and other variants.

1.7. Save Your Changes:

   – When you’re finished, click ‘Publish’ or ‘Update’ to save the changes.

1.8. Preview Your Changes:

   – Visit your website to see the new font. For example, on our demo site, we changed the body font to Roboto and the heading font to Helvetica.

Note: Not all themes offer the same options as the Astra theme. If your theme doesn’t have these settings, you might need to use a different method.

---

---

2. Changing Fonts in WordPress using Full site editor

Most WordPress themes come with preinstalled fonts that you can choose from. This feature is usually available in themes that support the full site editor (FSE).

If you are using a theme like Twenty Twenty-Two, you can change your site’s font using the FSE.

If you’re unfamiliar with FSE, it allows you to customize your entire WordPress theme using blocks, similar to how you create or edit posts and pages in the WordPress editor.

For this tutorial, we will use the Twenty Twenty-Two theme, Since this is available by default.

Step 1: Go to your WordPress admin panel and Navigate to Appearance > Editor.

Step 2: In the full site editor, click the ‘Styles’ icon in the top right corner and Select the ‘Typography’ option.

Step 3: Now, You can choose which elements to change, such as text or links.

    For this example, select ‘Text’ as the element.

Step 4: Click on the ‘FONT’ dropdown menu to select a new font. 

Step 5: When you’re finished, click the ‘Save’ button to apply the changes.

Step 6: You can add custom fonts to your WordPress site and then use the full site editor to change them.

---

3. Changing Fonts in WordPress using Block Editor 

Since the introduction of block editor, things become easy and very handy to edit pages or blogs. With the block editor in WordPress, you can customize how your fonts look on your website. 

Here’s what you can do:

• Change Text Color: Adjust the color of your text and its background.

• Set Font Size and Style: Control the size and overall style (appearance) of your text. The appearance options usually include font-weight (like boldness), which depends on the font selected in your theme settings.

• Additional Text Formatting: You can also make text bold or italic, and choose how it is aligned (left, center, or right) within the block.
• Highlight and Style Text: Highlight specific text, apply strikethrough, or add special text formatting.

• Insert Inline Elements: Add inline elements like code snippets and images directly within the text.
• Use Subscript and Superscript: Add characters in subscript (below the line) or superscript (above the line) to your text.

---

4. Changing Fonts in WordPress using WordPress Plugin

If you are using a generic or very basic WordPress theme, it might lack inbuilt fonts. In that case, you have to rely on WordPress plugins such as the Fonts Plugin or Google’s Fonts Typography. 

Here are the steps you can follow:

Step 1: Install and Activate the Fonts Plugin  

• Go to your WordPress dashboard and click on “Plugins” from the left menu.
• Click “Add New” at the top of the page, then search for “Fonts Plugin.”
• Once you find it, click the “Install Now” button and wait for it to install.

• After installation, click “Activate” to enable the plugin on your site.  

Step 2: Access the Fonts Plugin Quickstart Guide  

• After activation, a quickstart guide will appear in your WordPress dashboard.
• You can enter your email address to receive a PDF guide with additional instructions.  
• Alternatively, click on the ‘Customize Fonts’ button to go directly to the customization options.  

Step 3: Open the Customization Options  

• When you click ‘Customize Fonts,’ the plugin’s customization settings will be opened in your theme’s Customizer.

• Here, you will find various options to change your site’s fonts.

Step 4: Open the Basic Settings 

• In the Customizer, find the ‘Basic Settings’ menu and click on it.

• This menu contains options for adjusting the fonts for different parts of your site.

Step 5: Customize Your Fonts  

• Inside the ‘Basic Settings’ menu, you’ll see options to change the fonts for your content, headings, and buttons.
• Click on each dropdown menu next to the text element (like “Content” or “Headings“).

• Choose a font from the list that appears. You can preview how each font looks before applying it.  

Step 6: Save Your Changes

• Once you’ve made all your font choices, don’t forget to click the ‘Publish’ button at the top to save your changes.
• The Fonts Plugin will automatically update your website with the new fonts, making your content look exactly how you want.

---

5. Adding Custom Fonts in WordPress Manually

If you want to use custom fonts on your WordPress site, it’s possible, but it does require some technical skills. You’ll need to be comfortable editing theme files, have a basic understanding of how WordPress files are organized, and know some basic coding.

To do this, we will make changes to a few theme files and add some CSS (styling code). You’ll also need a code editor that you prefer and an FTP program like FileZilla to access and edit the files on your website.

Note: It’s highly recommended that you make these changes in a child theme, rather than the main theme files. This is because even a small mistake in editing the main theme files can potentially break your website.

If you want to add a custom font like Google’s “Sevillana” to your WordPress site, follow these simple steps:

Step 1: Choose the Font on Google Fonts

1. Go to Google fonts website and search for “Sevillana.”

2. Once you find it, select the font styles (like regular, bold, italic, etc.) you want to use on your site.

3. Google Fonts will provide an embed code with a link that looks something like this:  

https://fonts.googleapis.com/css2?display=swap&family=Sevillana&display=swap

   Copy this link, as you will need it in the next steps.

Step 2: Connect to Your Website Using FTP

1. Open your computer’s FileZilla program (an FTP client).

2. Use FileZilla to connect to your website. You will need your FTP login details (host, username, password).

3. Once connected, navigate to the folder:  

   /public_html/wp-content/themes/yourthemechild/  

  Note: Do not forget to Replace yourthemechild with the name of your child theme.

Step 3: Edit the functions.php File

1. Find the functions.php file in your child theme’s folder.

2. Right-click on the functions.php file and select “View/Edit” to open it in your code editor.

3. At the bottom of the file, add the following code:  

php
function add_my_font(){
wp_enqueue_style( 'add_my_font', 'https://fonts.googleapis.com/css2?display=swap&family=Sevillana&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'add_my_font' );

   This code tells WordPress to load the Sevillana font from Google.

Step 4: Tell WordPress Where to Use the Font

1. Go back to your child theme’s folder and find the style.css file (this file controls the styling of your site).

2. Open style.css in your code editor.

3. Add the following code to the file:  

CSS

.body, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Sevillana', sans-serif; 
}

   This CSS code sets the Sevillana font for all the body text and headings (H1 to H6) on your site.

Step 5: Save Your Changes

1. Save the changes you made in both the functions.php and style.css files.

2. Refresh your website to see the changes. The Sevillana font should now be applied to your text and headings.

Additional Tips:

If the font doesn’t appear correctly, double-check that you’ve entered the code correctly.

Every WordPress theme may use different CSS rules, so if this method doesn’t work, you may need to find the specific CSS selectors for your theme. You can use your browser’s inspection tool to help with this or contact your theme’s developer for guidance.

---

Read: 🚩 How do you embed WordPress icon fonts on your website?

---

6. Adding custom fonts in WordPress Full Site Editing Theme

In the latest WordPress themes, called Full Site Editing (FSE) themes, you don’t need to use the old method of adding custom fonts with CSS code (@font-face). 

Instead, you add the font files directly to a specific folder and then set them up in a file named theme.json.

To demonstrate this, we are taking the Sevillana font family from Google Fonts and using the Twenty Twenty-Two theme as an example.

Step 1: Download the Font from Google Fonts

– Go to the Google fonts library, and look for the font you want to use > Click on it.

– Now, click on the “Download all” button at the top right corner. This will download a ZIP file containing the font files to your computer.

Step 2: Access Your WordPress Theme Files

– Now, open the WordPress theme files on your computer. You can do this either:

  – Locally (if you have WordPress installed on your computer), or

  – Via FTP (if you are working on a live website).

For this guide, we’ll assume you are working on a local installation.

Make sure you know where these files are located, as you’ll need them for the next steps.

Step 3: Locate the Font Folder in Your Theme

– Find your theme folder by navigating to:  

  wp-content/themes/twentytwentytwo/

– Inside the theme folder, go to the assets folder, then open the fonts folder:  

  wp-content/themes/twentytwentytwo/assets/fonts/

Step 4: Add the Downloaded Font Files to Your Theme

– Extract the downloaded ZIP file to find the font files (such as .woff2 or .woff formats).

– Drag and drop the extracted font folder into the fonts folder in your theme’s directory:  

  wp-content/themes/twentytwentytwo/assets/fonts/

fonts folder in your theme’s directory” class=”wp-image-28070″/>

Step 5: Open the theme.json File

– Now, find the theme.json file, which is in the main theme folder:  

  wp-content/themes/twentytwentytwo/theme.json

theme.json file, which is in the main theme folder” class=”wp-image-28069″/>

– Right-click on theme.json and choose to open it with your favorite code editor (like Notepad, Visual Studio Code, etc.).

Step 6: Add Font Details to the theme.json File

– In the theme.json file, look for the “settings” section.

– Scroll down to the “typography” settings. You will see some code that defines existing fonts, like “Source Sans Pro.”

Now, add your custom font by inserting this code after the existing font settings:

json
{
  "fontFamily": "Custom Font Name",
  "fontFace": [
{
   "fontFamily": "Custom Font Name",
   "fontStyle": "normal",
   "fontWeight": "400",
   "src": [ "file:./assets/fonts/CustomFontName.woff2" ]
}
  ]
}

Replace "Custom Font Name" with the actual name of your font, and "CustomFontName.woff2" with the exact file name. In this case, we use Sevillana

Step 7: Save and Check Your Changes

• Save the theme.json file after adding the new font details.
• If you’re working locally, copy the updated file back to the fonts folder of your theme directory to overwrite the existing file.
• If you’re working via FTP, upload the updated theme.json file to your server and overwrite the old file.

Step 8: View the Font in the Twenty Twenty-Two Theme

• Go to your WordPress dashboard and Navigate to Appearance > Editor to access the Full Site Editing mode in the Twenty Twenty-Two theme.
• When the screen refreshes, click on the Styles button. You should see your new font listed and ready to use.

---

---

Summary

As you can see, there are multiple ways to change fonts in WordPress. If you are using a generic theme, the easiest and most straightforward method is to use a WordPress plugin.

However, if you have a Full Site Editing (FSE) theme, it may provide only two or three font options by default. You can add more fonts manually, but this method is more complex and requires some coding knowledge.

If you don’t want to use the manual method or install additional plugins (as adding plugins can affect website performance), it might be better to choose a theme that offers multiple font options built-in.

But if you are a developer and enjoy working with code, manually adding fonts can be a simple task.

If you have any questions or concerns regarding this article, please let us know in the comments section below.

---