-as of [16 AUGUST 2024]–
.
*pdf link*
.
Do you want to add custom fonts in WordPress?
Custom fonts allow you to use a beautiful combination of different fonts on your website to improve typography and user experience.
Apart from looking good, custom fonts can also help you improve readability, create a brand image, and increase the time users spend on your website.
In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and the CSS3 @Font-Face method
.
Adding custom fonts in WordPress
Note: Loading too many fonts can slow down your website. We recommend choosing two fonts and using them across your website. We’ll also show you how to properly load them without slowing down your website.
Before we look at how to add custom fonts in WordPress, let’s take a look at finding custom fonts that you can use.
How to Find Custom Fonts to Use in WordPress
Fonts used to be expensive, but not anymore. There are many places to find great free web fonts such as Google Fonts, Typekit, FontSquirrel, and fonts.com.
If you don’t know how to mix and match fonts, then try Font Pair. It helps designers pair beautiful Google fonts together.
As you are picking your fonts, remember that using too many custom fonts will slow down your website. This is why you should select two fonts and use them throughout your design. This will also bring consistency to your design.
With that being said, let’s take a look at how to add custom fonts in WordPress. This is what we will cover in this tutorial:
Adding Custom Fonts in WordPress from Google Fonts
Adding Custom Fonts in WordPress Using Typekit
Adding Custom Fonts in WordPress Using CSS3 @font-face
Adding Custom Fonts in WordPress from Google Fonts
Preview of Google Fonts
Google Fonts is the largest, free, and most commonly used font library among website developers. There are multiple ways you can add and use Google Fonts in WordPress.
Method 1: Adding Google Fonts Using a WordPress Plugin
If you want to add and use Google Fonts on your website, then this method is by far the easiest and recommended for beginners.
The first thing you need to do is install and activate the Google Fonts Typography plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Deal: If you want to get the premium version of the plugin, then make sure to use our Google Fonts for WordPress coupon for a 30% discount. This will let you change the font color and size in your WordPress theme and more.
Upon activation, you will be given the opportunity to enter your email address to receive the official quickstart guide.
You Will Be Offered the Google Fonts Typography Quickstart Guide
Next, you’ll need to click on Fonts Plugin » Customize Fonts in the admin sidebar.
This will automatically take you to the WordPress theme customer, and automatically open the new ‘Fonts Plugin’ section.
Choose Custom Fonts Using the WordPress Theme Customizer
Here you can choose the default fonts for your website in the ‘Basic Settings’ section, and fonts for the specific parts of your website under ‘Advanced Settings’.
Let’s start by clicking on ‘Basic Settings’. Here you can select the fonts for your content, headings, and buttons and fields.
Choose Default Fonts Using the Plugin’s Basic Settings
The ‘Font Family’ drop down menus let you choose a new font. You will find the default font at the top, then the system fonts, and finally a huge list of over 1000 Google fonts.
When you choose a new font, the preview will automatically change to show you how it looks.
When You Select a New Font, the Preview Window Will Be Updated
Now you can use the plugin’s advanced settings to fine tune your font selections.
You will need to click the ‘<‘ back arrow button at the top left of the page and then click on the ‘Advanced Settings’ section.
Here you will find settings for the different sections of your website, such as the site title, navigation menu, content area, sidebar, and footer.
The Advanced Settings Let You Fine Tune Your Font Choices
For example, the ‘Content’ section will give you options to change the font of your different heading levels and quotations.
You can select the custom fonts you’d like to use from the drop down menus.
Choosing Custom Fonts for the Content Area
You can choose custom fonts for your sidebar area in a similar way.
Simply click the back button and enter the ‘Sidebar’ settings. There you will find drop down menus to select fonts for your sidebar headings and content.
Choosing Custom Fonts for the Sidebar
When you are happy with your custom font selections, don’t forget to click on the ‘Publish’ button to store your changes.
Method 2: Adding Google Fonts Manually in WordPress
This method requires you to add code to your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.
First, visit the Google Fonts library and select a font that you want to use. Next, click on the quick use button below the font.
Select font styles you want to use
On the font page, you’ll see the styles available for that font. Select the styles that you want to use in your project and then click on the sidebar button at the top.
Get the font embed link
Next, you will need to switch to the ‘Embed’ tab in the sidebar to copy the embed code.
There are two ways you can add this code to your WordPress site.
First, you can edit your theme’s header.php file and paste the code before the tag.
However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.
Simply install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.
Add font code to your WordPress site
Don’t forget to click the ‘Save’ button to store your changes. The plugin will now start loading the Google Font embed code on all pages of your website.
You can use this font in your theme’s stylesheet like this:
1
2
3
4
5
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
To learn more, see our guide on how to add Google fonts in WordPress themes.
Adding Custom Fonts in WordPress Using Typekit
Typekit Adobe Fonts
Typekit by Adobe Fonts is another free and premium resource for awesome fonts that you can use in your design projects. They have a paid subscription as well as a limited free plan that you can use.
Simply signup for an Adobe Fonts account and visit the browse fonts section. From here you need to click on the button to select a font and create a project.
Add typekit font to a project
Next, you’ll see the embed code with your project ID. It will also show you how to use the font in your theme’s CSS.
You need to copy this code and paste it inside the section of your website.
Typekit font embed code
There are two ways you can add this code to your WordPress site.
First, you can edit your theme’s header.php file and paste the code before the tag.
However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.
Simply install and activate the Insert Headers and Footers plugin.
Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.
Adding Typekit by Adobe Fonts in WordPress
That’s all, you can now use the Typekit font you selected in your WordPress theme’s stylesheet like this:
1
2
3
4
5
h1 .site-title {
font-family: gilbert, sans-serif;
}
For more detailed instructions, check out our tutorial on how to add awesome typography in WordPress using Typekit.
Adding Custom Fonts in WordPress Using CSS3 @font-face
The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.
First, you need to download the font that you like in a web format. If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.
Once you have the webfont files, you would need to upload them to your WordPress hosting server. The best place to upload the fonts is inside a new “fonts” folder in your theme or child theme‘s directory.
You can use FTP or File Manager of your cPanel to upload the font.
Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:
1
2
3
4
5
6
7
@font-face {
font-family: Arvo;
src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Don’t forget to replace the font-family and URL with your own.
After that you can use that font anywhere in your theme’s stylesheet like this:
1
2
3
4
5
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}
Loading fonts directly using CSS3 @font-face is not always the best solution. For example, if you are using a font from Google Fonts or Typekit, then it is best to serve the font directly from their server for optimal performance.
We hope this tutorial helped you learn how to add custom fonts in WordPress. You may also want to learn how to embed a Facebook video, or check out our list of the best Instagram plugins for WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.
Editorial Staff
Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. We have been creating WordPress tutorials since 2009, and WPBeginner has become the largest free WordPress resource site in the industry.
www.wpbeginner.com /wp-themes/how-to-add-custom-fonts-in-wordpress/
How to Add Custom Fonts in WordPress
About the Editorial Staff9-12 minutes 3/12/2020
.
.
*👨🔬🕵️♀️🙇♀️*SKETCHES*🙇♂️👩🔬🕵️♂️*
.
.
.
.
💕💝💖💓🖤💙🖤💙🖤💙🖤❤️💚💛🧡❣️💞💔💘❣️🧡💛💚❤️🖤💜🖤💙🖤💙🖤💗💖💝💘
.
.
*🌈✨ *TABLE OF CONTENTS* ✨🌷*
.
.
🔥🔥🔥🔥🔥🔥*we won the war* 🔥🔥🔥🔥🔥🔥