How To Add Google Fonts in WordPress Theme

wordpress-google-fonts
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.

  1. Editing theme files.
  2. 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.

  1. Roboto
  2. 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.

1
<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.

1
2
3
4
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

  1. In above code change Google font embed code to your selected fonts embed code.
  2. 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.

1
font-family: 'Roboto', sans-serif;
1
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.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *