How To Add Google Webfonts To WordPress – 3 Easy Ways

Want to add Google web fonts to WordPress website. If you are planning to have some great, attractive and unique typography for your blog or website then Google web font directory can offer you some great inspiration.

The best part is, Google host all these custom fonts for free of cost and it can be used by anyone across the globe. This means you don’t need to upload and host these extra files from your servers or CDN.

Adding Google Webfonts To WordPress Website

Well, these webfonts might seem to be very interesting, but if you’re new to web designing and don’t know anything about CSS ( cascading style sheet ) then implementing them into your theme might become a headache for you.

But that’s why we are here. In this post, we will share 3 different ways to integrate any custom font with your website. We will be using;

• WordPress plugin to simply the process.
• @import technique.
• @font-face method.

Note:  In both @import and @font-face we will have to edit your style-sheet manually so as to add the custom codes which is required to bring the changes.

Let us Start With Using This Plugin

Plugins are made to help you in your way to professional blogging. Today you have to just think of any custom function and you will find a dedicated plugin either for free or as premium.

Over here for this task we will be using WordPress Google Webfont plugin. This amazing plugin allows you to choose custom font for any specific CSS element such as .post, .title, .post h1 etc.

Now the problem is the ever-growing webfont directory due to which the plugin developer have to release regular updates. So if you want to move with latest typography trend then you will have to update the plugin in a regular basis.

Download

@import Technique – Basic Part

This method requires manual editing of your theme’s stylesheet. It’s easy to implement but your need to know certain CSS elements which are used in your HTML structure and is accordingly styled. You will also need certain tools and they have been listed below.

• Firefox web browser.
• Firebug firebox addon.
• Notepad++

All these three tools are free, open source and can be downloaded from the internet. We will need notepad++ as it can easily render hundreds of programming languages with ease and is best for web designing.

Once you have downloaded them all and have installed them on your PC or laptop you should follow these steps.

1. Visit Google webfont and chose your desired typography. You can also use the search function or can use the Google search. My personal favorite is open sans, lato for content, lobster, droid sans for headings.

2. Now once you visit the official page select your font and then click on the quick use button which has been highlighted in the above image. Once you click it you will be directed to next page with multiple selection & integration option.

3. In the new page, you will be offered with multiple style, page load time and other integration options. You have to simply choose the styles available and have to scroll down the page.

After scrolling to the middle, you will find a message “Add this code to your website:”. This is what we need so as to implement the new custom font to your website. You are provided with three option.

1. Standard which means you will be linking your website to a new external stylesheet.
2. @import which is used to load an only external file.
3. JavaScript function which I personally don’t prefer using.

Here you have to copy the code provided under @import section. Then you need to paste it in notepad++ or to any .txt file as a backup.

Now move to your theme’s stylesheet. Navigation through your wordpress administration panel >> appearance >>editor.

Over here you should find and edit the theme’s style, it’s usually denoted as style.css. Once you open it simply paste the @import code at the top of the stylesheet and save it.

Editing CSS To Add Google Webfonts To WordPress Theme – Advance Part

Your very first task is to open your website. Now you have checked the HTML element and accordingly the CSS element of your website. For example, if I want to change the font of my post title then I will use firebug to find the element. For my theme its h1, .entry-title, .entry-title a, #title.

Now the question is how to do so. Here comes the use of firebug addon. Make sure you have installed it and have restarted your browser. Now follow the steps which I have provided below.

Open your website and then open any particular page or post. This is necessary to view every HTML element in details. Then click on the bug icon present in right-hand side top region.

After clicking it will open a new tab under the page, you are operating. You will have to use the element check button to check any particular portion of your page. It’s present in the left top of firebug window, just next to option button.

Now click on element check function and move your cursor to headline. In the firebug window, you will be able to see both HTML and CSS codes and they will change with every change the HTML structure.

Once you have reached to your post headline click over it and then check your CSS codes. You will get your needed element. Check the image provided below for better understanding.

Now copy the HTML code ( example: h1, .entry-title ) and then again move to your theme editor page. To navigation move to WordPress admin page >> appearance >> editor. Then open your stylesheet and then use browser’s search function ( ctrl + f ) to find this element.

Now over here you will have to place your new font family. In order to do so you will need to place this CSS code there.

font-family: 'Open Sans',sans-serif;

Full example.

h1,
 .entry-title,
 .entry-title a,
 #title {
 font-size: 24px;
 font-size: 1.71428571rem; font-family: 'Open Sans',sans-serif;
 }

Once you are done you have to click on update file button. If you are using any cache plugin or CDN service then make sure to flush your cache files. Then reload your website and you will see all your changes.

Using @font-face method

This is very similar to @import method but is consider more search and speed friendly. If you check the guidelines provided by Google page speed and Yahoo slow then you will understand that they don’t prefer using @import CSS method.

In order to add Google webfonts to wordpress blog using @font-face we will need the same @import code. From this code, you need to copy the font url and have to paste in your web browser. The result will be your required code.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Now from the above CSS just copy the font URL that is;

http://fonts.googleapis.com/css?family=Open+Sans

And if it’s something like;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);

Then you must copy the URL along with the numerical variables.

http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic

Now paste these url in your browser and you must get the output as shown below.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}

Now you have to copy and paste these CSS codes above your themes style sheet. Now again click on update file button and clear all available cache files. In order to view the changes just refresh your website and you will see new typography.