Are you looking to add custom fonts in WordPress website?
Well, that’s a great idea, because the custom fonts in WordPress allow you to add an appealing touch and feel to your site or blog. A beautiful combination of fonts can enhance the user experience (UX) and improve readability for your website visitors.
Along with good looks and attractive typography, the custom fonts help you to build a brand image and boost the average time visitors spend on your website or blog.
Before going into how to add custom fonts in WordPress, let’s first explore from where you can download custom fonts that are reliable and SEO-friendly.
Suggested reading: Top 10 FREE WordPress themes for new bloggers in 2020
Finding custom fonts for WordPress website or blog
There are many sources to find and download the free fonts for WordPress website, but you have to ensure that you are choosing a reliable source.
Some of the best sources to download fonts are:
- Font Squirrel
- Google Fonts
- Edge Web Fonts by Adobe
- Fonts.com
- Typekit
- Font Pair
- DaFont
- 1001 Free Fonts
Things to take care of while using custom fonts
While the use of custom fonts is a great thing, but there are still a few things that you need to take care of while implementing the changes.
You should never use more than two fonts on your entire site. Because if you use multiple fonts on your site, it will impact the loading speed. Your site will become slow because the webpages will take more time to load these fonts. And there are many consequences of a slow site. Your SEO will get impacted and visitors will the leave the site.
Moreover, the use of multiple fonts avoids you from maintaining consistency across the site.
Suggested reading: 5 game-changing image optimization methods for WordPress sites
How to add custom fonts in WordPress?
In this article, we will explore the adding of custom fonts in WordPress using Google Fonts.
Adding custom fonts in WordPress using Google Fonts
The reason we have chosen Google Fonts is because it has been developed by Google, which is the most reliable and trusted source for every website need. Moreover, Google Fonts are SEO-friendly and easy-to-use.
Here is the step by step process:
1. First thing to do is to download the Easy Google Fonts plugin. From your WordPress dashboard, visit the Plugins section, and click on Add New.
2. Search for the Easy Google Fonts. Click on Install.
3. Once installed, activate the plugin.
4. After activation, it’s time for you to customize it. Go to the Appearance and click on Customize. The live theme customizer interface will appear, which will also show you the new Typography section.
5. Click on Typography to see the parts of your website to which you want to implement Google Fonts.
6. Click on Edit Font option under the section of your site where you want to apply Google Fonts.
7. From the Font Family dropdown menu, you can select the Google Font that you want to apply to the selected section. Along with the font, you can also set font style, font size, padding, margin, etc.
8. Once done, click on Publish to implement the changes successfully.
Please note that the Google Fonts plugin will work differently on the basis of your WordPress website theme. Some of the features might not work the same way for all the themes.
The good thing is that using this plugin, you can customize and develop your own controls to make changes to website fonts. For this, go to the Settings, and then Google Fonts page. From here, you can create your own control and add a unique name for the same.
Click on the Create font control button. In the next step, you will have to enter the CSS selectors. It allows you to add HTML elements to which you want to add the custom fonts, such as H1, H2, H3 paragraph, quotation, etc.
Once you have edited these settings, click on Save font control button to save the changes. Also, you can use more than one controls.
Must read:WordPress security guide: 8 best tips to secure WordPress website
Adding Google Fonts to WordPress the manual way
Another way to add Google Fonts to your WordPress site is using the manual way. If you don’t want to use a plugin, you can also do the same thing with a few lines of code. To do so, follow the process below:
1. Go to the Google Fonts library and choose the font of your choice. Click on the quick use button available under the font.
2. Next, find the Embed tab to find the code to be copied.
3. Now, to change the font on your site, simply open the header.php file of your theme and add the copied code here before the <body> tag.
4. Save the file again to implement the changes.
Handing over to you:
So, this was the step by step guide to add custom fonts to WordPress site the easiest way. We have written the process for Google Fonts, but you can also use other reliable fonts of your choice and preference. The steps are not much different. But we recommend the use of Google Fonts.
If you have any queries, feel free to reach us out using the comments below.
Read Next: 4 best ways to find dead or broken links in WordPress