enqueue google font

Enqueue Google Font in WordPress

As a New Theme Developer or learner it is a smart decision to use child theme to enqueue google font in WordPress. Using child theme is safe and recover in case of accidental damage while developing a WordPress site.

#1 Enqueue Google Font through functions.php file:

  1. Step: Visit google.com, select your google font and copy url or link,
  2. Step: Copy this below code and paste in functions.php file
    function google_fonts() {
    wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Open+Sans');
    wp_enqueue_style( 'googleFonts');
    }
    add_action('wp_print_styles', 'google_fonts');
  3. Step: Now replace this https://fonts.googleapis.com/css?family=Open+Sans URL with your own google font URL.
  4. Step: Save functions.php file,
  5. Step: Open wordpress theme CSS file,
  6. Step: Do changes with font family name in css file as you like.
    body{
        font-family: 'Open Sans', sans-serif;
    }

#2 Conditional enqueue google font through funtions.php file

In some rare cases, you may need to add couple of google fonts in your wordpress theme which is only need for some particular section. To do this you can use conditional wp enqueue technique.

In above code just wrap this line

add_action('wp_print_styles', 'google_fonts');

with this

if (!is_admin()) add_action('wp_print_styles', 'google_fonts');

So the final conditional enqueue google font code will be:

function google_fonts() {
wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Open+Sans');
wp_enqueue_style( 'googleFonts');
}
if(!is_admin()) add_action('wp_print_styles', 'google_fonts');

Video: Enqueue Google Font in WordPress

Published by

Emdad Khan

I am Emdad Khan, A WordPress Theme Developer and Author of BN Web Design Website. A full time Freelancer on WordPress Theme Development & Optimization as well as blogger.

Leave a Reply