The options available to change the fonts in WordPress might differ depending on the WordPress theme you are using. Through my personal experience with WordPress and my own research, I have tried to cover all types of themes in this article. In this tutorial, we will explore different ways of changing fonts in WordPress.
Option 1. Using the Theme Customizer (Built-in Option)—A convenient option that works in the majority of themes.
Most WordPress themes have a built-in customizer that lets you change fonts at the click of a button. This is by far the easiest way to change the fonts on your WordPress website. However, this built-in customizer option can differ based on the type of WordPress theme. While the actual path can slightly differ from theme to theme, there are two main types of customizers. Your theme will have either of the two. Let’s discuss how to change fonts in each type.
Customizer Type 1
This type of customizer is present in the majority of WordPress themes. Many popular themes, such as Astra, Neve, Blocksy, OceanWP, Hestia, Kadence, and Sydney, have this type of built-in customizer. Though the customization path can slightly vary from theme to theme, the interface is the same, i.e., the left-hand customization sidebar. Let’s understand how to change the fonts with this customizer type in the most popular WordPress theme, Astra.
The path to change the fonts in this customizer type in the Astra theme is as below:
Appearance < Themes < Customize < Global < Typography.
- Go to the ‘Themes‘ sub-section under the ‘Appearance‘ section in the WordPress Admin Sidebar.
- Once you click ‘Customize,’ you are redirected to the customization screen.
- On the customization sidebar to the left, click ‘Global.’
- Click ‘Typography’ on the ‘Global’ menu.
- You will see different font customization options on the ‘Typography’ sub-menu. You can either select a font preset or change the body and headings font separately. You can also change the default font for each heading separately.
Font customization paths for other popular themes:
- Neve, Blocksy, OceanWP, and Sydney: Appearance < Themes < Customize < Typography
- Hestia: Appearance < Themes < Customize < Appearance Settings < Typography
- Kadence: Appearance < Themes < Customize < Colors & Fonts < Typography
Customizer Type 2
This customizer type is typically found in the WordPress default themes from Twenty Twenty-Two to Five and many other themes. Let’s understand how to change fonts with this customizer type in the WordPress default theme, ‘Twenty Twenty-Five.’ The path to change the font in this customizer type in the ‘Twenty Twenty-Five’ theme is as follows:
Appearance < Themes < Customize < Style < Edit Style < Typography < Elements
- Go to the ‘Themes’ sub-section under the ‘Appearance’ section.
- Hover over the applied theme and click ‘Customize.’
- Once you click ‘Customize,’ you should be redirected to the customization screen.
- On the customization screen, click ‘Styles.’
- Some typography presets are shown on the styles sidebar. These presets are typically font duos created by the theme designer to suit a specific theme. You can preview and choose one of these font presets based on your liking. However, if you want specific fonts for your website other than those in these presets, you can also do so by following the steps below:
- If you want to use specific fonts for your website, click the pencil icon, ‘Edit Style,’ in the top right corner of the sidebar.
Once you click ‘Edit Styles’ on the left sidebar, a new sidebar to the right will appear on the screen.
- Click ‘Typography’ on the right sidebar.
Exploring additional typography options other than presets
Once you click ‘Typography,’ different typography options will appear. You will also see the theme’s default fonts on this screen.
If you want to explore additional fonts other than the default fonts, perform the following steps:
- Click ‘Manage fonts,’ indicated by the setting icon in the ‘Typography’ sidebar.
Once you click ‘Manage Fonts,’ a Fonts pop-up window will appear.
- On the Fonts pop-up window, you have the option to either install Google fonts or upload fonts of your choice. If you are uploading fonts, you should make sure that you have the proper license to use them as web fonts to avoid any copyright infringement.
Installing Google Fonts on a WordPress theme
Google Fonts are open-source fonts that you can use on your website free of charge for any personal or commercial purposes. Google Fonts is a huge repository of over 1500 font families comprising different font types, such as serif, sans serif, script, handwriting, etc. This customizer type provides the option to install any Google font for your website. In order to install a Google font on a WordPress theme with this customizer type, perform the following steps:
- Go to the ‘Install Fonts’ tab of the pop-up window.
- Click on the font family on the list you want to install. In this example, we will install the font family, ‘Afacad Flux.’
- A font family typically consists of multiple font variants of different weights. Select the font variants you want to install.
- Click the ‘Install’ button.
After installing the Google font family, you can see it under the custom section on the library tab.
You can change the default fonts for the following elements:
- Text
- Headings
- Links
- Buttons
- Captions
Changing Fonts for the ‘Text’ Element
In order to change the default font for the ‘Text’ element, perform the following steps:
- Click on ‘Text’ under the ‘Elements’ section.
- Select your preferred font from the drop-down list.
- Set the default font size from the font size presets (S, M, L, XL) or enter a custom size.
- In order to enter the custom size, click the settings icon and enter the number or adjust the slider.
You can also select a specific font weight in a font family under the ‘Appearance’ section. You can also adjust the default line height, letter spacing, and letter case.
Changing Fonts for the Headings
- A WordPress theme’s heading hierarchy typically consists of six heading levels, H1-H6. You can set one default font for all headings or different default fonts for each heading separately.
Similarly, you can change the default fonts of links, buttons, and captions.
Option 2. Using the Font Plugin (for highly customizable typography)—Works in all themes.
You can use the popular ‘Font plugin‘ to change fonts in WordPress. This plugin offers a basic free version with limited features. According to the developer, the plugin works with all themes. The Font plugin is useful in the following scenario:
- Your WordPress theme does not have a built-in option for font customization.
- You want a highly customized website with different typography for different elements, such as the header, footer, sidebar, site title, etc.
- You want to use Adobe fonts.
The premium version of the Fonts plugin lets you host the Google fonts locally on your website’s server and helps you comply with the EU GDPR requirements. Furthermore, it optimizes the speed of your website because you are hosting the Google fonts locally rather than fetching them from a third-party server. The path to change the fonts in WordPress using the Fonts plugin is as follows:
Fonts Plugin < Customize Fonts < Fonts Plugin < Basic Settings or Advanced Settings
- Install and activate the Fonts Plugin.
Once the Fonts Plugin is installed, perform the following steps:
- Click the ‘Fonts Plugin’ on the WordPress Admin sidebar.
- Click ‘Customize Fonts.’
- Click ‘Fonts Plugin’ on the customization sidebar.
For the basic typography settings.
- Click ‘Basic Settings.’ This option lets you set the default font for all the heading levels, the body, and the button and input fields.
For the advanced typography settings
- Click ‘Advanced Settings.’ In the advanced settings, you can set the default font for the following elements separately:
- Site title
- Site navigation links
- Each heading level
- Content
- Lists
- Quotes
- Sidebar headings and content
- Footer headings and content
Furthermore, you can also upload fonts in the advanced settings of the plugin.
Option 3: Using the CSS—Works in all themes.
You can use the ‘Additional CSS’ function to change fonts in WordPress as well. This option is useful when your theme does not have any option to customize fonts.
How to access the CSS window?
The path to access the Additional CSS window in any WordPress theme is as follows:
Appearance < Customize < Additional CSS
- Go to the WordPress Admin area.
- Click on ‘Appearance’ on the sidebar to the left.
- Click on ‘Customize’ under the ‘Appearance’ menu item.
Once you click on ‘Customize,’ you will be redirected to the Customization sidebar.
- Click ‘Additional CSS’ on the customization sidebar.
- Add codes to the CSS window.
- Click ‘Publish’ to save the changes.
With CSS, you can import fonts using @font-face or via services like Google Fonts. When you use this method, you need to ensure that the fonts you are using are properly licensed and do not result in any copyright infringement. Google Fonts are open-source fonts and can be used for free. Therefore, they are safe to use as web fonts.
Google Font API Example
Suppose you want to use the Google Font ‘Montserrat’ on your website. In this case, you can add the following CSS code to change fonts in your WordPress website:
The first part of the code imports the desired font directly from Google Fonts. In this example, we have imported the Google Font ‘Montserrat.’ You can replace this font in the coding with any Google font of your choice.
The second part of the coding applies the imported Google Font to headings and text on your WordPress website.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat" !important;
}
p {
font-family: "Montserrat" !important;
}
Please note that in the above CSS code, the term ‘!important’ was added while applying the font to headings and text. In most of the themes, if not all, if you don’t use ‘!important,’ you will not be able to make the desired font changes. You need to add the term ‘!important’ to override any conflicting font rules set up originally in a WordPress theme.