How To Add Google Fonts in WordPress Theme

In this WordPress tutorial I will explain how to add Google Fonts in your WordPress theme.

There are two ways you can add Google fonts in your WordPress theme / website.

Editing theme files.
Using a plugin.

Add Google fonts by editing theme files

Step 1: Select Google Fonts

Visit Google fonts page and select fonts which you want to include in your theme. I have selected these two fonts.

Roboto
Open Sans

Step 2: Get Google Fonts Embed Code

After you have selected your Google Fonts, you will get embed code. It will be something like this.


<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap" rel="stylesheet">

wordpress-google-font

Step 3: Add Codes in functions.php

Open functions.php file of your theme and add following codes.


function gelcode_google_fonts() {
  wp_enqueue_style( 'googlefonts', '//fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
}
add_action( 'wp_enqueue_scripts', 'gelcode_google_fonts' );

Please Note

In above code change Google font embed code to your selected fonts embed code.
I have removed https: from embed code. This will make your website compatible on both http and https protocols.

Step 4: Start using Google Fonts

Now you can use these Google Fonts in your theme.


font-family: 'Roboto', sans-serif;


font-family: 'Open Sans', sans-serif;

Add Google fonts Using a Plugin

There are several wordpress plugins using which you can also add Google fonts on your WordPress website. Below I have listed few similar plugins.

Just install any plugins, select fonts and start using.

Hope this article helped you.

Tutorial Category

WordPress