LOADING

Step by Step Guide on How to Add Google Webfonts in WordPress

by Henrik May. 06, 17 3 Comments
how-to-add-google-webfonts-to-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.

Google webfont home page

 

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.

Google webfonts code

In our case I’ve choosed the Roboto font and the code to embed should look like the one bellow.

embed code for webfont

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

 

wordpress editor
On the right hand side column find “Theme Header” (header.php)

theme header in the WP control panel

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! )

Adding webfont stylesheet to the header

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:

.css-selector {
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

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

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!

Social Shares

Related Articles

Leave a Comment

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