Google fonts is a collection of designer web fonts which are open source and can be used in websites and other projects.

We will see how to add Google web fonts in WordPress sites to make them look great through beautiful typography.

What is Google Fonts Directory?

Google fonts directory is a huge collection of designer fonts in more than 135 languages. All the fonts in the library are open source fonts and organized by a robust team of designers and engineers. It means if you are thinking, are Google fonts free to use? then the answer is, yes, all the fonts are absolutely free and can be used in any of your projects as the licensing has already been taken care of by Google itself.

One of the other good reasons to use Google Fonts is that it won’t slow down your site as they will automatically use the cached version of the same font once it is loaded.

There are multiples ways to embed Google fonts in WordPress both manually (using code) or by using a plugin. We will discuss both ways starting with the easy method first which is, as you may have guessed, using a WordPress plugin.

Google Fonts WordPress Plugin

Let’s see how to add Google fonts to WordPress with a plugin called Easy Google Fonts.

We have found this plugin very easy to configure and use right away. The plugin can be used with any WordPress theme and will add custom Google fonts without the need for any additional coding. Let’s see the process step-by-step:

wordpress plugin google fonts

  • Once installed, go to Appearance > Customize > Typography > Default Typography to see fonts settings.

wordpress google typography

  • This is the central place to change typography of any part of your WordPress site. You can change all headings and paragraph fonts from here. Choose your favorite font under Font Family drop-down.

wordpress font settings

  • Once you are done with font style, switch to Appearance tab to select font color, background color, font size, line height and letter spacing.

font appearance

  • Similarly, Positioning tab will control border settings and some other extra options.

Easy Google Fonts not Working?

If the Easy Google Fonts plugin is not working on your WordPress site then you may have to set the plugin settings manually.

For example, we were trying to change the style for H3 heading under twenty seventeen WordPress theme but it was not working. Reason being the H3 heading is additionally controlled by a CSS class entry-title.

css heading class

See our tutorial how to find a CSS class in WordPress?

  • In such a situation, we need to change plugin settings under Settings > Google Fonts.
  • Under Edit Font Controls tab, enter Control Name and add CSS selectors you want to control. In our case, it would be .entry-title. We also added .entry-title a as the H3 heading is also a hyperlink in twenty seventeen theme.

wordpress font control

See our detailed article CSS ID and Class Selectors in WordPress for more info.

  • Click Save Font Control button to apply changes.
  • Go back to WordPress theme Customizer > Typography > Theme Typography. You will see CSS class settings here which you defined under font controls.

wordpress typography settings

Hopefully, you will be able to change font settings now. Here is a tutorial how to find CSS classes in WordPress? if you want more help.

How to Add Google Fonts Manually in WordPress?

If you want to add Google fonts in WordPress without any plugins then a little bit of coding knowledge is required but don’t worry, you will be able to do it yourself easily with the methods discussed below.

First things first, you need to configure the font which you want to use for your site.

Configuring Website Font

Visit Google Fonts directory and select the fonts you want to use. You can even type custom text to check the font style with your own text.

You can use Search to find the font by name. You can also make use of Categories, Sorting and Languages to limit results.

Woopoo's Tip

  • Click the tiny plus icon next to the font to add it to your selection. A black bar will appear at the bottom of the screen with your fonts selection. Multiple fonts can be added.
  • Click the bar to see Embed and Customize settings for the selected fonts.

google fonts html settings

Now, we will see 3 methods to add selected fonts in WordPress:

  1. Adding Google Fonts using CSS
  2. Adding Google Fonts using HTML
  3. WordPress Enqueuing Method

1. Adding Google Fonts using CSS

Google fonts can be displayed in WordPress using @import in theme’s CSS stylesheet.

  • From your admin panel, go to Appearance > Editor. Choose your theme’s Stylesheet (style.css) and add the @import embed code in the beginning of the file.

google fonts css settings

  • Don’t add <style> HTML tag as shown in Google fonts embed code. Here is how it should look like in style.css.

wordpress editor css font

  • Click Update File button to apply changes.
  • To use the font you just added, either add the following code in the same stylesheet for the CSS class you want to update or go to Appearance > Customize > Additional CSS and override the CSS class with the updated font.

For example, to change the font for the class entry-title, you can write:

.entry-title { font-family: Bungee, cursive; }

To change the font in twenty seventeen WordPress theme, the code will be:

.entry-title a { font-family: Bungee, cursive; }

google fonts css

Always use a child theme to change theme files.

Woopoo's Caution

See WordPress child theme tutorial for more details.

Although the CSS method is Ok for small websites but it is NOT recommended for medium to big-scale websites as this method can slow down your website. @import can create render-blocking warning which means other scripts will not be able to run parallel to @import which may cause website delays.

2. Adding Google Fonts using HTML

Google fonts embed settings comes with an HTML code which you can add to your theme’s header.php.

google fonts html settings

You will find the file in your theme’s folder. Open header.php file and add Google fonts embed code (Standard) just after <head> tag.

google embed code header

For more help, see our one of the best articles 20 free code editors to edit WordPress files.

Again, it is always a good idea to use a child theme for the purpose otherwise the code you have added could be overwritten when the theme will get updated.

Once the code has been added, you can use the font using Theme Customizer as described in step 1 (CSS method).

3. WordPress Enqueuing Method

Recommended and the right way to add Google fonts in WordPress is by using wp_enqueue_style function.

Using functions.php file, We will write our own code to call Google fonts. Let’s do it.

  • Open functions.php using your chosen code editor. The file resides in WordPress theme’s folder under wp-content folder.
  • Add the following code at the end of the file:

function my_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Bungee|Roboto', false); }
add_action( 'wp_enqueue_scripts', 'my_google_fonts' );

  • Replace https://fonts.googleapis.com/css?family=Bungee|Roboto with your own code from Google fonts website.
  • Believe it or not, you have done it.
  • To use the Google fonts you just added in functions.php, use Theme’s Customizer as described above.

Here is an example how we change the headings font in twenty seventeen WordPress theme:

wordpress google fonts example

Additional Readings

Conclusion

We have extensively covered how to add Google Web Fonts in WordPress easily using multiple methods including HTML, CSS and WordPress plugin. Make use of Google typography and add custom fonts to make your website beautiful today.

Last thing, please don’t forget to share this article and follow us on Twitter and Facebook

Gimme a Share pleeeaase!

Pin It on Pinterest

Share This