How to add a custom Google font to a WordPress site?

Sometimes a WordPress theme doesn’t have an option to set Google fonts via theme options. Usually, these options are available in the premium version of the theme. If you are using a theme that doesn’t have this option you can still add the font by adding custom code to your function.php file. This file can be edited at WordPress admin page via Appearance -> Theme editor. When you navigate to Editor page you will need to select the function.php file and add the code that we will generate in this tutorial. The best option is to add the code to the end of the file.

First, we have to find your desired Google font from the library of Google fonts. Let’s say that we like Ranga font. After you find the font you want to use, you need to select this font in order to get the Google font link.

Now that we selected the Google font, we can get the link that we will need to include the Google font into our theme. In our case the link is:

https://fonts.googleapis.com/css?family=Ranga&display=swap

In the next step, we will add the code to the function.php file to enqueue this Google font into our WordPress site:

function pmc_add_google_fonts() {

wp_enqueue_style( 'pmc-google-fonts', 'https://fonts.googleapis.com/css?family=Ranga&display=swap', false );
}

add_action( 'wp_enqueue_scripts', 'pmc_add_google_fonts' );

Now our Ranga google font is included into the theme and we can use CSS to change the typography of the elements. You can read more about how to add a custom CSS to your theme in our previous tutorial.

In our case we will change the typography of the H2 tag. The code we need to add to CSS is:

h2{font-family: 'Ranga';}

And our new font is now looking good and ready for our visitors to admire it.

Thank you for reading this tutorial. If you have any question you can post it in the comment section below.