Having the right font on your website not only aids design but it is crucial for readability. In this tutorial I will show you four ways to change your WordPress font. These methods are organized from easiest to hardest so anyone can follow.
You will also learn, step by step how to put your own unique fonts on your website. You can choose what to read first from the table of contents below. Enjoy!
Method 1: By Using the theme’s customizer
The easiest way to change a font on your WordPress website is to go to the built-in customizer, where, for some themes you may find a Typography section there which affords you the ability to edit your theme’s fonts. If you are using OceanWP then the settings can be found at Appearance-Customize
After which you navigate to the Typography tab.
After you select Typography you will now have access to a tab where you can manipulate the font for various elements in your website.
From here you will be able to change the font for many different areas of your theme.
For some themes you may find the settings in Appearance- Customize – General – Typography or somewhere there about.
These settings may only be limited to the fonts that are pre-loaded into the theme by the developer and you may have to import more whether manually through coding or using a plugin, which we will talk about later on in this post.
Method 2: By using plugins
The second easy way to change your fonts is to use a plugin. There are many plugins that can do this but I will go over the two most useful ones.
Plugin 1. Easy Google fonts
To download this font from your admin dashboard go to Plugins – Add new – (search) Easy google fonts – Install and Activate.
Now go to appearance – customize – then you will see typography and you will be able to change different fonts from there. Themes like OceanWP already have this feature installed but you may still need the plugin for specific changes that the theme may not allow you to edit, which I will show you below.
For fonts that may are not affected by the Google fonts plugin, you will need to know a little bit of CSS.
Step 1. Locating the font – You don’t need any special tools for this. Locate the font on your website that you would want to change. For this example I am going be changing the text in the “CONTACT US” button.
Step 2. Finding the CSS class – Using your mouse or trackpad, right click the text you want to change and then select “inspect’. A side bar with the code of the website should appear on the right side of the page; sometimes it is on the bottom of the screen but you will know it when you see it.
What’s happening here? As you can see, your screen is divided. The section highlighted is the general area that you are inspecting. Now it is time to browse to the specific area in order to find the font and then be able to change it.
What are we looking for exactly? The CSS class that styles the font. For the rest of this tutorial I will focus on the right side of the screen, but while you are doing this, you will notice that the selected area in the left keeps changing as you go deeper into the code.
Step 3. Narrowing down – Now that we have our general section selected, it’s time to find the code that has the text attributes. On my screen below we are going to expand the “section” by clicking the little arrow that I have underlined. This is the code selection for the button that we previously inspected.
Once it is expanded, You will see that it can be narrowed down further. In this case I clicked the arrow at "span class= "elementor-button-content-wrapper". This then opened up another line of code. By hovering my mouse over it, I found that the selection on the left had completely focused on the text of the button, and that’s how I know that I have found my class because this is the font I want to change.
Note: This sample website uses the elementor plugin so your "span class" may have a different name but the concept is the same.
So, the last image shows the highlighted text, which means success!
Step 4. Copy and paste – Now all you have to do is to copy that class, which in this case for me is “.elementor-button-text” then navigate to your dashboard – settings – google fonts
Once that is done, you can now go ahead and type in the name of the font control and save it. I am going to name mine “Front page button text” and then click “Create Font Control”.
After you have done that, it’s time to add the CSS selector for the font control, so go ahead and add it. Mine will be ".elementor-button-text". I will add that and click the box to check “Force Styles Override (Optional)” This will ensure that the theme’s default instructions will be overwritten. Then click “Save font control”.
After you have saved your font control you will see a box appear below the the font control tab which says you can visit the customizer to manage the control.
Click on the underlined word "customizer" or navigate to Appearance – customizer in your admin panel.
Step 5. Editing the font – After you have navigated to the customizer you will see the typography tab on the left panel.
If you are using a theme like OceanWP which already has a typography tab, the google fonts typography tab is the one at the top. Select it and then go to Theme Typography.
Once you have selected this tab, you will then be directed to another tab which shows you the custom font classes that you can edit. For me, I only have Front page button text, so that’s what I will edit, if you have more it will be shown in the tab. I am going to expand the edit font section; this is where I will be able to see the controls.
After the tab is expanded you will now see the option of altering the font family, weight, decoration and the option to transform it (Uppercase etc.). It will look similar to the image below.
Once you’re here all you need to do is navigate to font family and change the font to the one you want. I am going to change mine to “Courier new” and you will see the change in the window at the right.
As you can see, the font had changed; now you can change the weight, decoration etc.
Note that – If you do not see the changes live, you will need to navigate your website on the right panel where it is displayed to where you can see the change happening live.
Once you’re done click “publish” and you have now successfully changed your font using Easy Google Fonts.
Plugin two – Use Any Font
While Google Fonts have a wide catalog of fonts, the one you want may still be on your computer or on a website. The “Use any font” plugin allows you to upload your custom font and assign it to any area of your theme.
Step 1. Install and activate – You can download the plugin from the link above, then upload and activate it. Or Navigate to “Plugins – Add new” In your admin dashboard.
Search for Use any font, then install and activate it.
Step 2. Navigating and verifying API key – Once that is done you’re going to navigate to the bottom of the admin panel and you are going to see the new option labelled Use Any Font; click it and in the dashboard that appears, select “Generate Free Lite/ Test API key”
Once you do that, a free API key will be generated. You can now go ahead and click verify. This is essential before adding any fonts and assigning them.
After it is verified it will look like this image below and you can then go ahead and upload and assign fonts.
Step 3. Adding and assigning fonts – Now we are going to the fonts we need. Go ahead and click the “Add Fonts” button and navigate to the font that you want to use. I have chosen the font Acapella for this tutorial.
Once you do that, name the font and click upload.
Then what you have is now a new font added to your website and you have a custom class to add the font using CSS on your website. I will talk more about CSS in this article but for now, I am going to add this font to my “.elementor-button-text” class that I used in the previous example by using this plugin.
So go ahead and click assign
Once you do that you are going to now select the font you want to assign and the area or custom class you want to add it to. For me my custom class is “.elementor-button-text” so I added that and then press “Assign font”.
Now, you would have assigned the font, It has been applied to my website as seen below.
It looks a little ugly so I am going to edit it. For my website I am using elementor theme editor. I am going to change the size and the text from all caps to regular.
So, in elementor, I will go to “edit with elementor” then select the button and change the button text. Then click update.
That looks a little bit better. In order to change the size and spacing, I am going to go over to the style tab and adjust the font’s properties. Note that you will not be able to change the font itself because the plugin will override it but you can edit it’s size etc.
And that is how you change a font using the “Use Any Font” plugin. This is also the way how you would edit it if you are using the elementor page builder. If you are using another page builder then the process may be similar.
Method 3 Using a page builder – (Elementor)
If you use a page builder you may have fonts pre-loaded or the ability to add custom fonts and images. Elementor allows you to add custom fonts and icons but you’ll have to pay for the pro version to get that feature. In the meantime, it has a lot of pre-loaded fonts that you can choose from for free.
Step 1. Navigating to the page and editing the section – On your admin dashboard, navigate to the page where you want to change the font.
If you are just using elementor for the first time there will be a blue button at the top of the page that says “Edit with elementor” but if the page is already edited it will be in the middle. I will edit my homepage.
Step 2. Finding the section – Once you’re there, you can either create a new section or find a section that you want to edit.
I am going to edit my main heading. So once I click on it, the panel on the left is going to give me the controls I need.
Now I am going to navigate to style - typography - click the little pencil I see there. Where I see family I am going to click the drop down menu and select the font that I had installed called ‘acapella.‘ This works for any font that you choose to install or you can select one of the many pre-loaded fonts.
This font is ugly in all caps but if you use it, you can always change the way you write the text in the first place. You can also change the size, weight, transform, height and letter spacing in the same panel.
Method 4: Using CSS styles.
The final way to change the font of your WordPress website is to use CSS code. Using this method, you will be able to change the font globally or for specific areas of your website.
There are two methods to do this; adding custom CSS in your customize panel or going to the admin dashboard and navigating to “theme editor - style.css.“
Step 1. I am going to start off fresh without the font having any assignment. The font that I want to use has been pre-loaded using the “Use Any Font” plugin mentioned above. So as of now, this is how it looks.
Note that if you have a font assigned to the element that you are going to change, It will not be overwritten once using this method.
Step 2. Click customize and navigate to custom CSS/JS
Once you click Custom CSS/JS, the tab will open a panel where you can input custom code. For this example I am going to use the ".elementor-button-text".
Since I am targeting the .elementor-button-text element. I am going to put this code in the box.
.elementor-button-text {font-family: ‘acapella’ !important; }
‘acapella’ is the font that I am going to use in this case, you can use whatever font you choose. Now let’s look at the result.
As you can see, the element has changed. Go ahead and click publish and that’s it.
Option 2 Using the theme editor. The next way is to go to the theme editor. I will not go too much into this one because I do not recommend it. Simply because I do not want you to break your site; as a precaution please back up your website before doing this method.
And if you are determined to try this method make sure that you are using a child theme.
Step 1. Navigating to the theme editor – In your admin dashboard navigate to Appearance-Theme editor.
Step 2. Finding the CSS file – For the theme that I am using here, in order to get to the CSS files, I have to navigate to Assets-style.css on the right side of the screen shown above.
Your theme may have a different path but the initial screen shown when you enter the theme editor should guide you to the style.css file.
Step 3. Finding and changing the desired font – After you have made your way to the style.css file in your theme editor, it is time to navigate to the area where you want to change the font.
In doing so, you can use any font included in the theme or uploaded by a plugin.
In navigating this file, you may find a whole list of features that you can edit. It is good to note that your changes may be wiped out after the theme updates so it’s best to use a plugin or the custom CSS/JS theme editor found in Appearance-Customize.
Final Thoughts
Editing your font is more serious than just making your site look better. It improves the user satisfaction. With the methods shown above, you are now fully able to change your fonts in four unique ways.
For more customization tips visit our articles on:
- The best google fonts to use for your website
- The 20 best themes to use for your your WordPress website
- 18 Ways how to speed up your admin dashboard
- How to edit WordPress source code of your website (PHP, HTML and CSS)
Thank you for making it SitePact. If you want help with professionally maintaining your website visit our pricing page to see what we have to offer.
