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="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

  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.

Category

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.