How to Add Google Fonts in WordPress

A simple change of font can point your website in the whole other directions. One font may seem juvenile, while the other one can be perfect for a business website. One will perfectly complement the design of your blog, while the other one can create a disaster.

Even if you have purchased one of the best WordPress themes, you still might want to change fonts. But unless that theme has the option to choose a font for the element that you want, you might find yourself in problems – how to get new fonts on your site?

One of the popular methods to get new fonts is using free Google Fonts.  In this guide, we’re about to show you:

How to add Google Fonts in WordPress manually

How to add Google Fonts in WordPress manually

If you’re not interested in coding and want a quick solution, we recommend choosing a plugin which will install everything you need in seconds and let you use free fonts without even looking at the code. But if you want to learn how to do that by yourself and implement Google Fonts manually, you can do that easily – follow the instructions and you’ll be adding fonts like a pro in minutes.

  1. Open header.php file
  2. Choose a font you like from https://www.google.com/fonts
  3. Copy the “standard” code provided in step 3 which looks like this:
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>

Now that you have placed the link in the header file so the font can be downloaded as soon as possible, you’re ready to use that font in your theme. Now you should open your style.css file which contains the CSS code, and add a new font where you want it to appear.

For example, you can change the font for your paragraphs by placing this code into the CSS file:

p {
font-family: "Merriweather", Times, serif;
}

It is simple as that. Now, you may also add fonts by using a different method. Import is actually not recommended because it doesn’t use parallel downloads so your theme will have to wait to load one font at a time and make everything much slower. We recommend using the previous technique, but if you still want to use the import method, you can do that in only two steps.

  1. Open style.css file
  2. Paste the code you’ve got from Google Fonts @import section. It should look something like this:
@import url(http://fonts.googleapis.com/css?family=Lora);

If you need to import more than just one font, you can add extra lines of codes, or to make it even more simple, just add “|” symbol between font names. Here’s an example:

@import url(http://fonts.googleapis.com/css?family=Lora|Monsterrat);

The basics are quite simple. But if you want to learn more about Google Fonts, and if you want to make the best out of the free service, we suggest checking out how to get started with Google Fonts.

How to add Google Fonts in WordPress using a plugin

Google is everywhere. But in case you’re not familiar with every Google service, you might have missed Google Fonts and now you’re wondering what that is. If you navigate to https://www.google.com/fonts you will find almost 700 free fonts ready for use. Currently, there are 848 fonts split into categories and you can easily find the ones you want.

Google Fonts can be found in Serif, Sans Serif, Display, Handwriting and Monotype categories. Each and every font has its own characteristics and those are thickness, slant, and width.

Now you probably wonder how you add these to your WordPress installation so that you can use new fonts on your website.

If you want to, you can install Google Fonts manually. But in this part of the article, let us show you how to add one font or the entire collection without typing a single line of code. Of course, it will be done by the power of plugins.

Easy Google Fonts

PRICE: Free

If you install this free plugin, it will enrich your WordPress with over 600 Google Fonts. What you do after an easy installation is browse through all fonts and choose the one you want to be featured on your website. The plugin uses WordPress Customizer to show you previews of fonts; you can see what your theme is going to look like with new fonts simply by clicking a button.

Not only that, but the plugin will give you the power of creating your own set of rules and controls in the admin area. And don’t worry about your theme and CSS files – Easy Google Fonts plugin takes care of everything and it’s needless to say you don’t have to write a single line of code by yourself. Check out the demonstration video to see the plugin in work.

Conclusion

Although adding new fonts might have seemed like a problem, now it looks quite easy, doesn’t it? Still, if you are not sure about the code and manual methods, grab the free plugin and you will have hundreds of new fonts added to your site in no time.

Start Blog Book

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

5 thoughts on “How to Add Google Fonts in WordPress

  1. Awesome post. It really gives a clear idea about the topic. I will definitely follow the instruction. Thanks for sharing.

Leave a Reply

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