Home Life Trends How to Add Custom WordPress Fonts the Correct Way

How to Add Custom WordPress Fonts the Correct Way

Your selection of font is important to your web site’s design. You might imagine nobody cares which font you employ - so long as it’s not Comic Sans - however this couldn’t be farther from the fact. Fonts can affect usability, readability, and magnificence. Plus, utilizing the similar default WordPress fonts as everybody else impacts your capability to stand out.

Learning how to change fonts in WordPress is simple. The platform can use any font you need so long as you set it up the proper manner. Once you choose the excellent typeface and set it up, you’ll be stunned at how completely different your content material appears to be like and the way simple it's on the eyes.

In this text, we’re going to discuss a bit extra about why you need to think about using customized fonts in WordPress. Then we’ll train you 3 ways to add new fonts to your web site. Let’s get to work!

Why You Should Consider Using Custom Fonts in WordPress

Two Google Fonts.

There are 1000's of free fonts yow will discover on-line and chances are high considered one of them will go completely along with your design.

In most instances, WordPress web sites default to utilizing ‘web-safe’ fonts to keep away from any points. These are typefaces most methods include by default. This manner, you possibly can guarantee your web site’s content material appears to be like a lot the similar no matter which working system or browser your guests use.

However, it’s additionally simple sufficient to set customized WordPress fonts, that are appropriate with most browsers and setups. Here’s why it is smart to use customized WordPress fonts over extra conventional choices:

  • To make your website stand out. Using customized fonts to your headings and subheadings could make a robust impression if the typefaces you select are distinctive. What’s extra, utilizing a singular customized font or two can separate your website from the remainder of the pack.
  • To enhance your content material’s readability. Some fonts are easier on the eyes when it comes to studying lengthy stretches of content material. A font with poor readability may frustrate guests and drive them away.

Perhaps extra importantly, there are only a few downsides to utilizing customized WordPress fonts in your web site. The solely situation you would possibly run into is if you happen to resolve to use a font that appears unprofessional - however sadly, we will’t enhance your interior style indicators!

How to Add Custom WordPress Fonts the Correct Way (3 Methods)

When it comes to including customized fonts to WordPress there are three approaches you possibly can take. You can both use a plugin, or go down the handbook route. If you resolve to go handbook, you possibly can add them by your theme’s header.php file or through Cascading Style Sheets (CSS). In this part, we’re going to showcase all three strategies utilizing completely different fonts, so you possibly can select which one you like.

1. Add Google Fonts to WordPress Using a Plugin

Part of Google Fonts' collection.

On prime of its many different providers, Google additionally presents a broad collection of fonts you should use all through your net designs. Their catalog consists of over 800 open-source fonts and it’s considered one of the hottest repositories out there on-line.

If you need to use a font domestically, you want to set up a ‘font file’ so your pc can acknowledge and use it. When it comes to web sites, the similar precept applies. You have to load the font so browsers can view it. As we talked about earlier, there are a number of approaches you possibly can take to obtain this - the best one includes utilizing plugins.

When it comes to including Google Fonts to WordPress, we advocate utilizing the Easy Google Fonts plugin. This instrument masses Google’s library of fonts for you, then use the default WordPress editor to change between them:

The Easy Google Fonts plugin.

To set up the plugin, head into the Plugins > Add New tab inside WordPress. Now sort Easy Google Fonts into the search bar to the proper of the display screen and await the plugin to present up amongst the outcomes:

Installing the Easy Google Fonts plugin.

Click on the Install Now button and WordPress will maintain organising the plugin. When it’s prepared to use, an Activate button will present up subsequent to the plugin’s identify. Click on it and we will get to work.

Changing your font settings is quite easy as soon as the plugin is energetic. Just leap to the Appearance > Customize tab and search for the Typography tab on the left-hand menu:

The Typography tab within the WordPress customizer.

Once you open this tab, you’ll see an possibility referred to as Default Typography. Inside this part, you possibly can change the fonts WordPress makes use of for every part of your web site:

Changing the default WordPress fonts through the customizer.

With the plugin energetic, you’ll have the opportunity to select from the complete assortment of Google Fonts. Simply choose the fonts you need to use and preview them utilizing the Customizer. Play round along with your new set of WordPress Google Fonts till you land in your closing picks and hit the Publish button. Now your web site ought to be sporting a brand new look!

The Adobe Typekit homepage.

If you need somewhat extra selection than Google Fonts can supply, you possibly can all the time take a look at Adobe Typekit’s repository. Unlike Google Fonts, Adobe Typekit options each free and premium fonts and there are much more choices to select from.

However, implementing Adobe Typekit fonts can be a bit extra advanced. To use them, you’ll want to create a equipment and cargo it into your web site. Kits can have a number of fonts, so that you don’t want to add a lot code to combine them, however they take a while to arrange at first.

First off, you’ll want to join an Adobe Account to use the service. Once you’re logged in, look by the Typekit catalog till you discover a font you want, and click on on the Web Use: Add to Kit button:

Adding a font to your first kit.

Now the platform will ask you to set a reputation to your equipment and point out the domains that may use it, as in the instance beneath:

Customizing your font kit.

Afterward, Adobe Typekit will offer you a JavaScript snippet that you just’ll want to add to your web site, which brings us to the second a part of this step. To add that code, you’ll want to entry your web site’s again finish, and we’re going to use File Transfer Protocol (FTP) to get there. FTP is a expertise that permits you to join to your web site, ship recordsdata backwards and forwards, and edit them. To use FTP, you want a shopper and most often, we advocate utilizing FileZilla because it’s a strong open-source utility.

Installing FileZilla works identical to some other pc utility. When you run it, the shopper will ask you for a set of FTP credentials to join to your web site, together with a Host, Username, and Password:

FileZilla CredentialsThese credentials are usually not the similar as these to your WordPress admin account. Depending in your host, you could have acquired them through e-mail at the preliminary signup stage. Otherwise, you ought to be ready to discover them inside your internet hosting panel. For instance, if you happen to’re a 000Webhost person, you may get your FTP credentials by going into Settings > General inside your dashboard. There’s a bit referred to as FTP Details proper at the prime of the display screen, together with the info you want:

Your FTP details.

Once you sort the info into FileZilla, you possibly can click on on the Quickconnect button to the proper. The shopper will set up a connection to your web site, and present a few folders on the lower-right facet of your display screen:

One of these two folders is named public_html and it consists of all of your WordPress recordsdata. Within right here, navigate to the wp-content/themes listing. Inside, you’ll discover particular person folders, one for every theme put in in your web site:

Your themes' directory.

Now, search for the folder that corresponds to your energetic theme. Inside, there ought to be a file referred to as header.php:

The header.php file.

It’s necessary that you just discover the header.php corresponding to your energetic theme. Otherwise, the fonts you add to it received’t load until you turn themes. In any case, right-click your header.php file and select the possibility studying View/Edit:

Editing your header.php file.

This will open the file utilizing your default native text editor, enabling you to make modifications to it. In this case, we’re going to add the JavaScript code you bought from Typekit earlier, between your file’s <head> tags.

Save your modifications and shut the file. Unlike utilizing plugins, you additionally want to configure your theme to use your new fonts once you need it to. To do it, you’ll want to edit its model.css file, which we’ll discover how to do in the subsequent step.

3. Add Custom Fonts to WordPress Using CSS

If you need to use a customized font that’s not a part of the Google Fonts or Adobe Typekit household, WordPress allows you to achieve this utilizing CSS. Unlike the strategies we’ve explored up to now, this method requires you to add a font file to your server. To achieve this, you’ll want to use FTP as in the earlier instance.

To get began, return to your energetic theme’s folder, situated inside the public_html/wp-content/themes listing. Once you’re in, right-click wherever inside the folder and select the Create Directory possibility. FileZilla will ask you to set a reputation to your new folder, the place you’ll retailer the fonts you need to use. In our case, we went with the identify Fonts:

Creating a directory for your custom fonts.

Enter your new folder and have a look to the left of your FileZilla window. The shopper additionally allows you to browse your native recordsdata and folders, so you possibly can add any of them to your server. Locate the font file you need to add and once you discover it, drag-and-drop it inside the Fonts folder to the proper,

FileZilla will maintain importing the file and when it’s prepared, we will transfer onto the CSS a part of this part. If you come back to your energetic theme’s important folder, you’ll discover a model.css inside:

Your active theme's style.css file.

This file accommodates your theme’s important CSS stylings and we'd like to edit it so it masses your new WordPress fonts. We’ll additionally use CSS to inform the platform the place to use it. Go forward and open the model.css file now by right-clicking on it and selecting the View/Edit possibility. The contents of your model.css file will depend upon the theme you’re utilizing, however simply in case, don’t make any modifications until you’re positive what you’re doing. For now, all we've got to do is add a single snippet of code:

@font-face {
    font-family: Font Name;
    src: url(https://www.yourdomain.com/wp-content/themes/your-active-theme/fonts/font-name.ttf);  
    font-weight: regular;  

As it's possible you'll notice, the snippet accommodates two placeholders. The first one is the identify of your font (Font Name) and the second is the URL. You’ll want to substitute each and in the case of your URL, bear in mind to specify the identify of your energetic theme’s folder, the font you’re making an attempt to load, and add the .ttf suffix to it. With the code in place, WordPress will comprehend it has to load your new font. However, you continue to want to inform the platform how to use it, which we will do with out leaving the model.css file. Here’s an instance of how to put your new font to work:

.h1 site-title { 
font-family: "Font Name", Arial, sans-serif; 

In this case, we’re telling WordPress to use your new font for H1 headings. However, you’re free to use it for virtually some other goal. If you’re undecided what sorts of parts you possibly can edit utilizing CSS or how to achieve this in the first place, this tutorial is an efficient place to get began.


Depending in your theme, WordPress allows you to use dozens of fonts. You might have the opportunity to discover a first rate match to your website’s model amongst them, however there’s no cause to restrict your self when you might have 1000's of choices to select from. Whatever sort of font you need, yow will discover it if you happen to look in the proper place, akin to Google Fonts or Adobe Typekit.

When you’ve discovered the font(s) you need to add to WordPress, right here’s how to proceed relying on the place they’re from:

  1. Add Google Fonts to WordPress utilizing the Easy Google Fonts plugin.
  2. Set up Adobe Typekit fonts by your theme’s header.php file.
  3. Add customized fonts to WordPress utilizing CSS.

Do you might have any questions on how to change fonts in WordPress? Let’s discuss them in the feedback part beneath!