How to Easily Add Custom Fonts to Your WordPress Website

Choosing the right font for your website can be a long and challenging task. There are many things to consider – what type of font style will fit your brand essence, how many different typefaces you should pick, whether to play it safe or go for something more unique and challenging, and the list goes on. Still, the end result is usually worth all the hassle, since good fonts can have a significant impact on the user experience and, consequently, on the overall success of your web page.

Now, it’s important to note that we’re talking about custom fonts strictly from the perspective of WordPress. This means that we’re not using the term “custom font” in its more general sense, which is in reference to fonts that are designed specifically for one client. Instead, we’re referring to any fonts that are not included with WordPress out of the box.

Nowadays, custom fonts have become an ever-present force of many WordPress sites. For this reason, there are many WordPress themes that come packed with custom fonts. However, having too many custom fonts active on your site can negatively impact your website speed. Luckily, there is a way to avoid this. We’ve decided to show how you can add custom web fonts to your WordPress site without slowing it down. You can read more about it below, or you can watch the video instead.

Finding Custom Fonts

As we already mentioned, picking which fonts to use for your site can be tough. If you’re not sure how to go about it, there are both free and licensed font resources on the web – like Font Squirrel, for example. This is a website where you can find free, high-quality fonts from all over the web, and you can use them both for personal and commercial purposes.

Aside from Font Squirrel, Google Fonts, Envato, fonts.com, and Fontspace are just some among the many other places bound to help you find just what you’re looking for .

During website creation, people usually pick and combine two different fonts – one for headings, the other for body copy. Picking more than two fonts is not recommended unless you’re an experienced designer, as it can make your page look messy and slow down your page loading time. In case you’re not sure which fonts to use together, FontPair can help you make a decision and find the perfect combination for you. There, you can browse through different font pair suggestions, and you can instantly see the names of the fonts in question, as well as the way the two will look like when arranged together. You also have the option of downloading the font pair on the spot. The site lets you search font pairs by certain criteria, such as Featured Pairs, Serif/Sans Serif, Display/Sans Serif, and so on.

Fontjoy is another site that can assist you in your font pair selection. There is a Generate button you can click to generate fonts, and you can determine how closely they are related. Also, in case you’ve already picked one font, you can generate another and see how it matches with what you’ve selected. The only thing you have to do is click on the lock icon next to the desired font so that the font generator will know which one to preserve and which one to generate.

Using Custom Fonts with Qode Interactive Themes

If you’re using (or plan to use) one of Qode Interactive’s premium WordPress themes, then you should know that they come with already integrated Google Fonts. So if you want to use any Google font from Google’s huge font library, you don’t have to worry.

In our themes, you can find the font settings if you access the options of the theme in question and then click on Fonts.

If you want to add any other specific font to your theme, you can do so using one of the methods described in the “Adding custom WordPress fonts without a plugin” section of this article. On the other hand, if you don’t use our themes, but still want to have a Google Font, you can find out how to do it below.

How to Add Custom Fonts to Your WordPress Website by Using a Plugin

Adding a custom font to WordPress with a plugin is simple. We will show you how to do it with two different plugins.

1. Google Fonts Typography

This plugin comes with already integrated Google fonts, so you don’t have to install any – you just have to choose the ones that you wish to use.

Once you’ve installed the Google Fonts Typography plugin, you can access its options by going to Appearance > Customize > Google Fonts.

There are two different groups of settings that you can use – Basic and Advanced settings.

In Basic settings, you have three different options available: Base Typography, Headings Typography and Buttons and Inputs Typography. The Base Typography option allows you to choose and configure the font of your body text (the text that appears the most on your site). The Headings Typography option is for picking the font for all your headings, while Buttons and Inputs Typography lets you select a typeface for your input fields and buttons.

For more thorough options, there are also Advanced Settings. Once there, you will be able to select a separate font for every heading (such as fonts for site title and description, post and page title and subheadings, sidebar and footer).

There is also a Pro version of the plugin, which comes with a few other options, like the ability of customizing font size, color and line height, the option of optimizing your website performance by only loading the font weights you plan to use, as well as adding the custom elements you want so that the plugin can adjust the settings accordingly and make them more personalized for your needs.

2. Easy Google Fonts

Once you install the Easy Google Fonts plugin, head over to Appearance > Customize > Typography > Default Typography.

This plugin only allows you to change fonts for paragraphs and headings, but not for your footer, sidebar and other website sections. However, you get to set up some additional features such as Font Weight/Style, Text Decoration, Text Transform, Font Size, and so on.

Even though you’re only able to change fonts for your paragraphs and headings, you can still insert custom parts of text for which you want to change the font. Say that, for example, you wish to change the typography for blockquotes and links. To do this, you simply need to insert custom fields for these categories. We’ll show you how.

Go to Settings > Google fonts.

If you want the same font for both blockquotes and links, then you need to create a Font Control. You can do this by entering a name in the Control Name field, then clicking the Create Font Control button.

Then, you should put the HTML tags for both links and blockquotes in the same font control (the tags are blockquote and a). When done, click on Save Font Control.

Once you create this new font control, you will get additional settings. When you go to Appearance > Customize > Typography, you will see another tab called Theme Typography. Here you will find all the settings for the tags you’ve chosen.

The settings that you’ll get will be the same as the ones for the default font controls.

Adding Custom WordPress Fonts Without a Plugin

There are ways to add custom WordPress fonts manually, and it’s really simple to do so. You do need some basic CSS knowledge in order to do it, but you can’t go wrong if you follow these steps. Below we’ll show you two different methods for adding custom WordPress fonts without using a plugin.

Method 1

First, go to Google Fonts and find the font that best corresponds with what you have in mind. When you choose the desired font, you will get all the information required for embedding it into your webpage.

Then, make sure to add the code into your header.php file. Go to Appearance > Theme Editor, find the header.php file and add the code right below the tag. The code for the Indie Flower font we selected is as follows:

<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">

Now, you need to find the style.css file. To access it, go to Appearance > Theme Editor in your Dashboard and select style.css. There, you will define the elements you wish to apply the font to. Namely, if you want a specific font for H1 heading, then this is what you will insert into the style.css file:

h1 {
font-family: ‘your font name goes here’, cursive;
}

You can add your font to any section of your site in the same manner. You just need to know the CSS selector for the element you’d like to change the font for.

Alternatively, there’s another place in which you can define where the font will appear. Click on Customize > Additional CSS. From here you can monitor all the changes on the spot.

Method 2

The most straightforward method of adding custom fonts to WordPress is by using CSS3 @font-face, which allows you to use any font you want on your webpage. First and foremost, you need to download the font you want to use in web file format. If you don’t have the format, then you can simply convert it with FontSquirrel Webfont Generator.

Then, you need to upload your font files to your hosting server. You can either upload the files in your child theme’s directory, or in a new folder within the theme itself. To upload the font, you can use FTP or cPanel’s File Manager.

After you upload the font, you should load it in your theme’s CSS stylesheet. To do this, you will use the CSS3 @font-face rule:

@font-face {
font-family: Arvo; 
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
font-weight: normal; 
}

You need to specify the font’s name, its location on your server, and its font-weight. From there, you can use that font anywhere on your site through some simple CSS:

h1 { 
font-family: "Arvo", Arial, sans-serif;
}

Conclusion

And that’s how you add custom WordPress fonts to your site. As you can see, there are many different methods you can use, and none of them are overly complicated. So go ahead, pick a font (or font pair) that strikes your fancy, add it to your WordPress site, and start customizing to make your typography beautiful, clean and remarkable.