How To Change And Add WordPress Fonts

Introduction

When it comes to websites, design is very important. Good design, aside from looking nice, also enhances user experience. One very important factor when it comes to web design is font. Fonts serve as a visual cue as to what a content is about and they also affect how the content is evaluated. This is very important, if your WordPress site, for instance, will be used for fund-raising campaigns. Knowing this, you may now decide to modify the fonts of your WordPress site. This article will go through just that. In this tutorial we will learn how to modify the fonts of your WordPress site.

Changing Fonts

Changing the Theme’s “Style.css”

The first way to change a WordPress site’s font is to modify the style.css file of the theme being currently used. To make the most out of this method, you would need to learn CSS. But if you just want a uniform font for all page elements then you just need to add the following in the style.css file:

* {font-family: font-family-name;}Code language: CSS (css)

You just need to replace font-family-name with the font you need - Times New Romans for instance.

This will change all the fonts used on your site into the specified font-family. However, more than not, we would need different fonts on different sections. So to do that, we need to define the font-family for different selectors such as the following:

#sectionA {
    font-family: Arial;
}
​
#sectionB {
    font-family: Helvetica;
}Code language: CSS (css)

While this method works, it's not the best method for those who are not familiar with code. In addition, modifying your site's theme can break your site (yes this is true, since wrong CSS syntax will cause an error). As a result you have to be very careful. Thankfully there is an easier way - using a font customization plugin.

Customizing Fonts Through the “Google Fonts Plugin”

There are many plugins in the market that give you the ability to customize the fonts on your websites. The best of these is the Google Fonts plugin which is free and can be found in the “Add Plugins” search page.

Once the plugin is installed and activated, you can start customizing the fonts on your site without the need for further configurations. All you need to do is hover the “Fonts Plugin” menu item then click on “Customize Fonts” . This will show the live-mode editor.

Here we can see the sections of the WordPress site where we can change the fonts. The basic settings allow us to configure the fonts of the content, headings, and buttons/inputs.

If we need more configuration options we can look at the “Advanced Settings” tab. Here it is in action for editing a sidebar font for instance.

Using this plugin is recommended since it is easier, more intuitive, and much safer making it ideal for WordPress beginners and experienced users.

Adding Custom WordPress Fonts

We’ve seen how we can change fonts with Google Fonts Plugin. However, in case the font you need isn’t available in that plugin, you can always add new fonts manually. However, as a result, you will have to edit the style.css file of the theme you will be using to make use of them. If you’re alright with doing that, then read on.

Installing and Activating the “Insert Headers and Footers”

Before we can add a font, we need to install the “Insert Headers and Footers” plugin first since we will be referencing URLs. The plugin can be found in the “Add Plugins” page upon searching for it. Install the plugin and activate it.

Once that is done, we can now add custom fonts to our site.

Adding Fonts from the Google Fonts Library and Typekit

We can add additional fonts either from Google Fonts Library or from Adobe Fonts.

Google Fonts Library

In the Google Fonts Library , we look for the font we need. For our example, we will be using the “Roboto” font

We then copy the link on the right sidebar

We then paste the link on the “Script in Header” text area on the settings page of the “Insert Header and Footers” plugin and then save.

Once that it done we can use the font in the theme’s CSS file as is stated on the font’s sidebar

In our example, that would be

element-name {
    font-family: 'Roboto', sans-serif;
}Code language: CSS (css)

where element-name is a a text based element.

Adobe Fonts

You can also add fonts from Adobe Fonts. However you need an account for this, so create one if you plan on using the fonts from this website.

To use a font you have to click on the </> button of the font you need. You will then be asked to create project. So create one.

We then copy the project’s link to the clipboard.

After that you paste it use it on the “insert Header and Footers” plugin.

To use the fonts we place the font attributes in the theme’s CSS file.

Using Font-Face

We can also add fonts through a CSS font-face. To do that, you have to download/convert the font you need in ttf format. After doing that we place the file in a newly created folder called fonts in the directory of the currently active theme. To use it, we need to add the following code in the style.css files:

@font-face {
    font-family: Font-Family-Name
    src: url('path-to-fonts-directory/Font-Family-Name.tff');Code language: CSS (css)

After doing that, you should be able to make use of the custom font-family as you would in default fonts. For instance:

h1 {
    font-family: Font-Family-Name;
}Code language: CSS (css)

Conclusion

We’ve seen the different ways to modify the fonts on your WordPress site. We’ve seen that we can modify fonts manually or through a plugin. We’ve also seen how to add custom fonts. Now you’ll be able to modify your WordPress site’s font as needed.

Thank you for reading!