Step by Step Guide on How to Add Google Webfonts in WordPress
This guide explains how to add Google webfonts in a wordpress website step by step.
Before we go any further I would like you to know there are two methods adding Google webfonts in WordPress themes.
1. Standard method (Recommended)
2. Using @import attribute
1. Standard Method (Easy 4 Steps)
1. Step – Find your font
Head to the google fonts website and choose your desired font. If you are not sure what font you would like to use in your wordpress website/blog, I have put together a help blog about The 10 Most Trending and Stylish Google Fonts for Blogs and Websites.
After you visited the Google Fonts website you will see a directory of fonts where you have to choose one by clicking on the plus sign.
2. Step – Get the embed code
After you clicked the plus sign there will be a pop-up window appearing at the bottom of your webpage. Click on that and you should see a screen like below. This screen will contain the code which you will have to embed into your <head></head> section.
In our case I’ve choosed the Roboto font and the code to embed should look like the one bellow.
3. Step – Adding the code
Adding the code between your <head> elements.
If you have established FTP connection with your website files, then you are more likely going to find your header file at the following directory.
public_html > wp-content > themes > YOUR THEME > header.php
The easier way for beginners to embed the code is via WordPress Control panel. Once you’ve logged in to your WP control panel, navigate to Appearance > Editor
On the right hand side column find “Theme Header” (header.php)
After you’ve opened your WordPress theme header files (header.php) you need to locate your stylesheet line codes and add your Google webfont link that you have previuosly copied from the Google fonts website.
Please make sure you insert the code above your main theme stylesheet code. (If you got stucked than feel free to leave a comment below this blog and I will be happy to assist you! )
Don’t forget to update your file by clciking the “Update File” button.
4. Step – Using the font in your CSS file
Now, after you have added the webfont stylesheet link in your html document all you have to do is reffer to it in your CSS file.
You can start using it in two steps.
Style an element with the requested web font, either in a stylesheet:
font-family: ‘Font Name’, serif;
or with an inline style on the element itself:
<div style=”font-family: ‘Font Name’, serif;”>Your text
2. @import Method
Second method like I mentioned in the beginning of my blog is the not so popular @import method. This method is much easier way to call a google font however it’s blocking every other downloads until the font file finishes, resulting in much longer website loading time.
In this method all you have to do is adding a simple line to your CSS file something like this
and you good to go 🙂
I hope my free tutorial helped you to create your own Google webfonts, if you need help feel free to ask anything in the comments below.
I would greatly appreciate it if you kindly share my blog on social media, good luck!