Add custom fonts in WordPress website can be a great way to add personality and branding to your site. In this comprehensive guide, we will walk you through the steps necessary to add custom fonts using the free Google Fonts service. We will also show you how to use font families, weights, and styles to create beautiful typography on your website. Let’s get started!

Where to Download Fonts for WordPress?

There are many places that offer free and paid font downloads, but the most popular is Google Fonts. If you want to add custom fonts to WordPress, you will need to use the Google Fonts service.

Types of Fonts Formats:

When you are looking for fonts to use on your website, you will need to decide what format to download them in. There are three main font formats: TrueType (.ttf), OpenType (.otf), and Web Fonts (WOFF, EOT, SVG).

TrueType and OpenType are both widely used font formats that were developed by Apple and Microsoft respectively. Web fonts are newer but they have become very popular in recent years because they can be used on all types of devices, including mobile phones and tablets.

Add Custom Fonts in WordPress:

To add custom fonts to WordPress, you will need to download the font files and upload them to your server. Once they have been uploaded, you will need to add the necessary code to your website’s header.php file.

In this example, we will show you how to add the Roboto font to your website. The first step is to download the font files from Google Fonts. You can do this by clicking on the “Download” button at the top of the page and choosing either TrueType or OpenType.

If you want to use Roboto as a web font on your website, you will need to download the WOFF and EOT files. You can do this by clicking on “Download for Web” on the right side of the page.

Once you have downloaded the font files, you will need to upload them to your server. You can do this using an FTP client or your hosting company’s file manager interface.

When uploading the font files, make sure they are in the same directory as your website’s CSS file. This is usually located at “public_html/wp-content/themes/yourtheme/style.css” on most servers.

Once you have uploaded the font files, you will need to add them to your website’s header.php file.

To do this, open your WordPress dashboard and go to Appearance > Editor. On the right side of the page, you will see a list of files. Click on the “header.php” file to open it in the editor window.

When you have the header.php file open, scroll down until you see the following code:

<?php wp_head(); ?>.

Below this line, you will need to add the following code:

@font-face { font-family: “Roboto”; src: url(“Roboto.eot”); src: local(“☺”), url(“Roboto.woff”) format(“woff”), url(“Roboto.ttf”) format(“truetype”); }

This code tells the browser where to find your font files and what type of font files they are.

Once you have added the code, you will need to save your changes and upload them to your server. You can test to see if the font is working by adding the following code to your website’s CSS file:

body { font-family: “Roboto”; }

If you have followed the steps correctly, your font should now be working on your website.

Font Families:

A font family is a group of fonts that share the same style, weight, and width. When you are adding custom fonts to WordPress, it is best to use a font family. This will ensure that your website’s typography looks consistent across all devices.

There are many different font families available on Google Fonts. Each font family has a different style and weight, but they all share the same width.

A good example of this is Roboto. It has a light and regular style, with weights ranging from 100 to 900.

If you want to use the Roboto font on your website, you will need to add the following code to your header.php file:

@font-face { font-family: “Roboto”; src: url(“Roboto.eot”); src: local(“☺”), url(“Roboto.woff”) format(“woff”), url(“Roboto.ttf”) format(“truetype”); }

body { font-family: “Roboto”; }

If you want to use a different font family, you will need to replace “Roboto” with the name of the font family that you want to use.

Adding Custom Fonts Using a Plugin:

If you don’t want to manually add custom fonts to your website, you can use a plugin. There are many plugins available on the WordPress repository that will allow you to add custom fonts with just a few clicks.

The easiest way to find a plugin is by going to your WordPress dashboard and clicking on Plugins > Add New. From here, you can search for a plugin and install it on your website.

The plugin that we recommend using is Easy Google Fonts. This plugin allows you to add custom fonts from Google Fonts with just a few clicks.

After you have installed the plugin, go to Settings > Easy Google Fonts. Here, you will be able to select the fonts that you want to use on your website.

You can also choose the font size and weight for each font. Once you have finished, click on the “Save Changes” button at the bottom of the page to save your changes.

Add Custom Fonts in Elementor:

If you are using Elementor, you can add custom fonts directly from the editor. This will make it easier for you to customize your website’s typography without having to use any code.

To do this, open your WordPress dashboard and go to Elementor > Settings. On the left side of the page, you will see a list of options. Click on “Advanced” and then click on the “Fonts” tab.

Here, you will be able to select the fonts that you want to use on your website. You can also choose the font size and weight for each font. Once you have selected the fonts that you want to use, click on the “Save Changes” button at the bottom of the page.

Now, when you open the Elementor editor, you will see a list of fonts that you can use on your website. You can also choose the font size and weight for each font.

Add Custom Fonts in Gutenberg:

If you are using Gutenberg, you can add custom fonts directly from the editor. This will make it easier for you to customize your website’s typography without having to use any code.

To do this, open your WordPress dashboard and go to Gutenberg > Add New. From here, you can select the font that you want to use on your website.

You can also choose the font size and weight for each font. Once you have selected the fonts that you want to use, click on the “Publish” button at the top of the page.

Now, when you open a new page or post, you will see a list of fonts that you can use on your website. You can also choose the font size and weight for each font.

How to Add Google Fonts to Your WordPress Theme?

If you are using a third-party theme, such as Genesis or Thesis, you can add custom fonts to your website by adding a few lines of code to your theme’s functions.php file.

To do this, open your WordPress dashboard and go to Appearance > Editor. On the right side of the page, you will see a list of options. Click on “functions.php” and then add the following code to the file:

function my_fonts() {

wp_enqueue_style(‘google-fonts’, ‘//fonts.googleapis.com/css?family=Roboto:400,700’);

}add_action(‘wp_enqueue_scripts’, ‘my_fonts’);

In the code above, we are using the “wp_enqueue_style” function to add the Google Fonts stylesheet to our website. We are also using the “add_action” function to add a new action that will be executed when our website loads.

Once you have added the code, click on the “Update File” button at the bottom of the page to save your changes.

Now, when you visit your website, you will see the font that you added in your theme’s stylesheet.

FAQ’s:

Q: Can I use custom fonts on my website without using a plugin?

A: Yes, you can add custom fonts to your website without using a plugin. However, you will need to add some code to your website’s functions.php file.

Q: How can I change the font size for my custom fonts?

A: You can change the font size for your custom fonts by adding a few lines of code to your website’s functions.php file.

Q: How can I use Google Fonts on my website?

A: You can add Google Fonts to your website by adding a few lines of code to your theme’s functions.php file.

Q: What is the best way to add custom fonts to my WordPress website?

A: The best way to add custom fonts to your WordPress website is by using a plugin. This will allow you to add custom fonts without having to use any code.

Final Words:

Adding custom fonts to your WordPress website is a great way to improve the typography of your website. In this article, we have shown you how to add custom fonts to your website using a plugin or by adding code to your theme’s functions.php file. We have also answered some of the most common questions about adding custom fonts to WordPress websites.

If you have any questions, please feel free to ask in the comments section below.