How to install Custom Fonts in WordPress?

How to Install Custom Fonts in WordPress?

Typography is the most important element when it comes to web design. By installing beautiful custom fonts to your WordPress website you can improve its design a lot. In this post, I am going to show you how to install custom Google fonts, Typekit (Adobe) fonts using a plugin and manually.

Places to Find Out Great Custom Fonts

Here are some free and premium resources to browse the best custom fonts for your project.

1. Google Fonts

Google Fonts

Google Fonts is an open-source fonts directory. You can use any font in your web-based project without any attribution.

They have around 1,000+ free fonts which can be easily added to any web-based project.

Google Fonts makes product and web pages run faster by safely caching fonts without compromising users’ privacy or security. When you use the code generated by Google Fonts, their servers will automatically send the smallest possible file to every user based on the technologies that their browser supports.

2. Adobe (Typekit) Fonts

Typekit (Adobe) Fonts

Typekit Fonts or Adobe Fonts is a subscription-based platform. All their fonts can be accessed if you have a creative cloud membership.

If you’re a designer it is a great resource to get access to hundreds of high-quality fonts with a small subscription fee.

Adobe no longer offers subscription plans for Typekit fonts. The complete font library is now included with all paid Creative Cloud subscriptions. If you have a Creative Cloud Photography plan or an Adobe Acrobat single-application subscription, you now get the full font library as well.

There are many other amazing font directories both free and premium. I am mentioning some of them here:

If you use too many fonts, your site will slow down. I would recommend to only install at most 3 fonts on your WordPress website. It will keep your site reasonably faster.

Let me explain two different but simple methods to install custom fonts to your WordPress site.

Use a plugin to Install Custom Fonts

There are various custom font WordPress plugins which you can use to install a font. I’m going to mention only the installation of TypeKit and Google Fonts using a plugin.

How to Install Google Fonts Using a Plugin

If you are new to WordPress then this is the easiest way to install a font to your WordPress website.

Step 1: Install and activate a WordPress plugin by the name Easy Google Fonts.

Step 2: Once activated, go to WordPress customizer and look for the “Typography” option.

Step 3: Here you can change the outlook of your complete website typography. You can select from 600+ Google fonts and see changes in a real-time preview. Easy Google Fonts allows you to create your own font controls and rules in the admin area

Step 4: After you make changes click on the Save & Publish button in the customizer.

How to Install TypeKit Fonts Using a Plugin

Step 1: Install Custom Adobe Fonts (Typekit) plugin from the WordPress plugins directory and activate it.

Step 2: Go to Appearance > Custom TypeKit Fonts and enter your Adobe project ID.

If you are using Beaver Builder, Astra theme, or Elementor Page Builder then your fonts will start showing in the settings.

This plugin only supports the above-mentioned themes and page builders. However, you can still use it on other WordPress themes you have to add custom CSS.

How to Install Google Fonts Manually in WordPress?

You can use multiple ways to add Google Fonts to your WordPress site. However, I am only going to mention the most reliable method.

Download Google fonts

Go to fonts.google.com and select fonts that you want to add to your site by clicking on the + button.

select font weights in the customize tab

After that, you will see a black bar appear at the bottom right corner.

Click and go to the customize tab. Select the font-weights that you would like to use.

Copy font url from the Embed tab

Click on the Embed tab and look for a font URL in the standard section. Select only the URL and copy it.

Now access your child theme’s functions.php file using FTP. If you don’t know what is a child theme or how to create one then our post on how to create a child theme in WordPress.

Enter this code to your functions.php file and replace the font URL with yours:


function add_google_fonts() {
 
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:400,700&display=swap', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

Save your functions.php file.

Now you need to call Google fonts to your theme’s stylesheet.

Google fonts also provide the CSS rules to call out your custom fonts. For example, in my case it looks something like this:

font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;

If I have to change my existing theme’s H1 style, I will simply add:

h1.entry-title {
	font-family: 'Roboto', sans-serif;
}

I hope you found this post useful. If you want to get more useful tips to improve your WordPress website then please subscribe to our blog.

Leave a Comment

Your email address will not be published. Required fields are marked *

Get Exclusive Content

Join thousands of subscribers who get free newsletter with powerful tips to drive more traffic and revenue.

You have Successfully Subscribed!