In this article, we will show you how to add custom fonts to wordpress manually and via plugin.

How to Add Custom Fonts to WordPress Manually

When it comes to adding custom fonts to WordPress by hand, you have three main options: HTML, JavaScript and CSS. There are pros and cons to each method and which one is the right one for you depends on your setup. Don’t worry, we will go through each of them in detail.

1. using css and @import

If you plan to install custom typefaces from Google Fonts, you might have noticed that it has a tab labeled @import. The service gives you a piece of CSS code.

To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. Or copy without the <script> brackets to the beginning of your theme’s (or child theme’s) style.css file.

Seems like a simple solution, right? But this is the least recommended method. Why?

The reason is the performance issues. Using @import is no longer the recommended way to go because it prevents browsers from downloading several style sheets at once. The consequence: slower page loading times. Stay away from it if you can.

2. Using a wordPress template file

A second method to get the fonts on your site is to take the code provided by the font libraries and copy it in your header.php template file. Most standard WordPress themes have it.

Make sure to place it somewhere between the <head> and </head> brackets. That way, your font will load whenever a page is loaded.

If you are using a child theme, be sure to copy the parent theme’s header.php file into the child theme directory and make the changes in there.

Some themes come with settings allowing you to add custom to your header and footer via the backend. This is also a viable option.

click here to continue >>