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 a 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 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 to the Google Fonts Directory and choose the Font you want to use.
(The Screenshot Below Shows some fonts)
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 the 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.
- Google Fonts API use on Net Tuts
- Google Font API home page
- Getting started with the font API
- Google Web Fonts FAQ
- How to use the new Google Font API (DesignShack)
- Google Font API in Use for Bloggers
- Introducing the Google Font API and Google Font Directory
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.
