Adding Custom Fonts In WordPress Using @Font-Face CSS Rule

 For every WordPress website, to give a better look, most of the web designers add custom fonts. There are many ways, but this tutorial is about adding custom fonts in WordPress using font face CSS rule.

There are many free and premium fonts which can be found on the website like Typekit. In every WordPress theme, at least one custom font is used.

Some web designers add Google Web fonts in their WordPress themes. It’s because all the fonts are free in Google fonts’ library.

But if you’re thinking about choosing any a custom font from Typekit, Font Squirrel or any other website then you have to take a different approach.

Knowing About The Font Format File Types

First of all, you should know the different font formats. There are many font formats, but in most projects, you will find only three.

TrueType Font (TTF)

OpenType Font (OTF)

Web Open Font Format (Web Format)

Depending on the browser version and type, these font formats are used.

But to get it to work everywhere, web designers use the Web Open Font Format. Though it’s kind of hard to find the font files in this format.

But don’t worry about it, you can easily find the font files in .ttf and .otf formats.

After downloading the file of your favorite custom font, you have to convert it into web format using the

Upload your font .ttf or .otf type file and convert it using the recommended settings of the web font generator.

Download the ZIP file to your computer and extract the content.

Uploading The Font Files to Your Web Hosting Server

To make it work, you have to upload the font files to your theme folder.

Though most of the WordPress themes already have a “Fonts” folder if not then you can create a new one.

Login to the cPanel of your web hosting account and navigate to file manager>>wp-content>>themes>>theme name and create the “Fonts” folder.

Upload the extracted font files to this folder using the “Upload” button shown in the navigation menu.

You can also use your FTP account to do so.

You have successfully uploaded the font files in your WordPress theme, but the work is not done yet.

Adding @Font-Face Rule In the CSS File

You have to edit the style.css file of your WordPress theme to add a few lines of code. Adding custom fonts in WordPress using font face CSS rule requires a little bit of designing knowledge.

Either you edit the style.css file from the cPanel or the WordPress admin panel. The choice is yours.

If you already have opened the theme folder then find the style.css file and right click on the file to select an edit option.

Now the code is required to fetch the font.

@font-face {

font-family : Fontname;

src : url(public_html/wp-content/themes/themename/Fonts/Fontname-Regular.ttf);

font-weight: normal;

}

Don’t forget to replace the font name and the theme name. You can easily notice the font name while choosing it.

Suppose the font name is “Open Sans” then you will use “Open Sans-Regular.ttf” instead of “Fontname-Regular.ttf”

NOTE: The path of the source is given considering your website is located in the PUBLIC_HTML folder. If you have a sub-domain or your website in any other folder, then you have to change the path.

How To Use This Font For A Perfect Design

Just like any other font, you can add the font-family for any element.

Let me show you an example. Suppose you want to target the heading of the post with an ID or class.

h1 .main-heading { font-family : ‘Open Sans’, sans-serif; }

Similarly, you can use this font-family anywhere in your WordPress theme.

An Alternative You Should Know

For some platforms, you have to use a different font file path. In the previous method, PUBLIC_HTML is included. In some cases, it doesn’t work.

To fix this, you can directly include the URL of your website.

@font-face {

font-family : Fontname;

src : url(https://www.yoursite.com/wp-content/themes/themename/Fonts/Fontname-Regular.ttf);

font-weight: normal;

}

As shown above, this code consists of only one new thing. You have to replace the PUBLIC_HTML with the URL of your website.

To use it for any HTML element, you have to follow the same CSS method as shown above. The same use of font-family and you’re done.

The process of adding custom fonts in WordPress using font face CSS rule is over.

You can upload as many fonts as you want like this. Though it’s not recommended to use more fonts because it impacts the page loading time of your website.