Skip to main content

How To Add Google Fonts in WordPress Theme

Submitted by admin on Sun, 11/28/2021 - 04:30
Google Fonts in WordPress
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.

<link href="|Roboto&display=swap" rel="stylesheet">


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', '//|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.

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