3 Easy Ways to Add Custom Fonts in WordPress

Adding font-face to your WordPress site is simple and takes a few steps to achieve. We will be looking at two different types of adding the custom font of your choice to the site. This includes:

1. Adding the custom font to your website:
   1. via file manager
   2. via theme editor
   3. via style.css file
2. Using the font in the website

Several websites contribute font development and different styles of fonts which you can simply download and opt for your personal website. Some example websites include Google font, Font Squirrel, adobe fonts, and a lot more. Before starting to download the font you need, you will have to check whether the font belongs to a particular category.

How to use @font-face in WordPress

Different font types basically compromise TTF or (true type fonts), OTF (or open type fonts), WOOF (or web open font format), WOOF 2 (or web open font format) 2.0, (EOT or embedded open type font). Each has specific functions and capabilities if running in different engines and browsers. Most every font comes under one of these categories.

When we choose modern websites that comprise the modern elements that we are currently working with, opting for TTF or OTF would be a good choice. Why because it’s easily available and affordable sometimes if you had to pay for the font package. You can always give your first preference to WOOF. But WOOF fonts are not with wide availability.

The basic tasks include:

1. Find the front face you like and the font phase name.
2. Installing zip file in wolf or TTF or OTF.
3. Adding the custom font to your website.
   • via file manager
   • via theme editor
   • via style.css file

Add fonts to WordPress without a plugin

Finding the font face you like and the font face name

When you have chosen a font and you didn’t know its name, here is something that you can use. You can actually right-click on the page and see the source code of the webpage in which you can actually find the details about the font that is being in use. If you find difficulty with finding the font, you can choose ‘What Font’. This will actually let you know which font is used on that particular website. Now that you know the name of the font, you are ready to search for the font and install it in your system to meet further needs.

Do click on font squirrel’s link below to explore more! https://www.fontsquirrel.com/

Installing the zip file in WOFF (else TTP or OTF )

Now, all you need to do is find this particular font in WOOF or TTF, or OTF format in font websites such as Google Fonts, Font Squirrel, Adobe Fonts, and many similar websites. Once you have downloaded the zip file of the particular font, there are two different steps through which you can update or upload this particular font to your website.

Adding the custom font to your website via the file manager

The first step is to upload fonts via file manager and the second kind of process is uploading the file through the theme editor in WordPress. With the first one, go to the c panel host and log in with the login credentials. From the dashboard,

1. Go to the file manager,
2. Navigate to wp-content >> themes >> upload the zip file and extract it.
3. Note the file path.

Adding the custom font to your website via the theme editor

The second way of adding the font to WordPress is by editing the theme editor.

Head over to your WordPress dashboard, and navigate to Appearance >> themes >> theme editor. Once the console is open, scroll down to find the font section in which you will have to add the following code snippet for WordPress to understand the font that you have used its location, and so on.

 Adding via theme editor - @fontface {                    
     Font-family: “AvenieNext”, sans-serif;
     Src: local(‘http:// location)
     Font- weight: normal;
 } 

(Or)

 @font-face {
 font-family: Custom Font;
 src: url(public_html/cpanel-username/wp-content/themes/your-theme/fonts/CustomFont-Regular.ttf);
 font-weight: normal;
 } 

Through this, you’ve activated the custom font inside your website and you can use it anytime when you want.

Adding the custom font to your website via the style.css file

Adding the fonts directly from the file manager to the styles.css file is another option through which you can add the font to your webpage. To do this, click on code edit and add the code snippet that we added previously in the theme editor.

 @font-face {
 font-family: Custom Font;
 src: url(public_html/cpanel-username/wp-content/themes/your-theme/fonts/CustomFont-Regular.ttf);
 font-weight: normal;
 } 

How to change the font in WordPress

Using Custom font on the website

Now we’re going to look through how we can add the custom font that we have downloaded, uploaded, and activated right now to the website.

This is a very simple step. You can simply add any global element, such as a paragraph, a heading, or a button, and go to the font section to customize with the Custom font. Else add this particular code snippet to the text portion of the global element.

 body {
 font-family: "CustomFont";
 } 

This is how you can add your desired custom font into the WordPress website to the web pages that you create and different elements that you insert in the webpage without adding a plugin to the site.

WordPress font plugin

We also have various plugins which support this activity too:

Some of the best plugins include wp-Typography, Simple Drop Cap, Typekit Fonts for WordPress, Google Font Manager, TinyMCE Advanced, Simple Pull Quote, Zeno Font Resize, and Easy Google Fonts.

Easy Google Fonts

Custom Adobe Fonts (Typekit)

Add Google fonts to WordPress customizer

Speaking about Google fonts in specific, Google fonts navigate your font, downloaded directly to the WordPress site, which makes it customized and optimized with WordPress without doing much with the steps. For more with google fonts, click the link below. https://fonts.google.com/

Points to Ponder:

• Keep a check on whether the theme update will make you lose your downloaded font.
• All way check whether you have given the right location in which the font is placed under src first when an error occurs.