Use Google Font API in your WordPress Themes

Google Font API in WordPress Themes

Want to make your WordPress themes look well designed with better fonts and beautiful typography overall?

Google Font API and Google Fonts directory might a better solution for you and that too for free.

You can use the Fonts available in the Google Fonts directory in your WordPress blog to make it more attractive and unique. The best part is that all the available fonts are Open Source and served directly from the Google Server.

Note: Using Google's Font API within WordPress has recently undergone few changes and so the code in this article has been removed until further updates.

If you are looking to use Google Fonts in your WordPress theme, please download and install Easy Google Fonts plugin for an easier method.

Easy Google Fonts for WordPress plugin

Download Easy Google Fonts

Easy Google Fonts is a quick and easy solution that enables you to use Google Fonts on your WordPress website without the need to edit code.

You can use the plugin and preview your website fonts using the WordPress Customizer in real-time before making any changes.

The plugin also works with almost all WordPress themes allowing you to control the complete typography of your theme.

We will come up with an updated article for adding Google Fonts API with manual codes shortly. 

Steps for Adding Google Fonts in your WordPress theme

If you want to use these fonts let’s get started. With a few simple steps, you can be able to use these fonts with your WordPress themes.

1. Go the Google Fonts Directory and choose the Font you want to use.

(The Screenshot Below Shows some fonts)

Google Fonts New Version

2. To Use the font, Just click on it and you will be shown the preview.

3. Now navigate on “Get the Code” button to get the code you need to use.

4. After you have got the code, you need to edit your WordPress theme you are using.

>> Editor >> Header.php.

Below your head tag (<head> add the code you copied for the Font you want to use:
For example, if I used the font, the code that I need to use will be

Note: Please backup your WordPress theme before editing any files. It's also recommended to use code editors such as Atom to edit your files).

Code removed

5. Update your file.

6. Next, you will need to open your CSS style file style.css. Now you need to add or edit the code for whatever element you need to apply the font.
For example, if I need to make a change to the h4 tag, I will change it to

Code removed

7. And that’s all. You can update the file and See the changes live on your WordPress blog.

If you are looking to use it in your blogger blog, then Blogger User has a detailed post “Make Blogger Template look better with Google’s Font API”.

Additional Resources for Google's Font API

Let me point out some additional resources that you can explore to understand Google's Font API.

You Speak

Are you using the Google Fonts API in your design and is it helping you with the process? Let us know in the comments below.

Pradeep Singh

Pradeep Singh

Pradeep Singh is the founder and your host here at WPism. He is an entrepreneur and blogger living his startup life based in London and Cambridge. Follow him on Twitter or like his page on Facebook.
Share on reddit
Share This Article
Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on twitter
Twitter

Leave a Reply

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

Join our list

Our Exclusive Deals

Share this post

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Help us share this post with your network?
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Want to keep updated with WordPress?

Join our monthly newsletter to receive best curated WordPress resources.

Want to keep updated with WordPress? Join our monthly newsletter.