Become Wordpress Professional - Your Ultimate Wordpress Guide

Saturday, 2 March 2013

How to integrate Google Fonts in Wordpress

Google fonts have been popular since quite a while now and most of the wordpress site owners are looking for ways to integrate Google fonts within their wordpress sites. This guide will help in understanding how to integrate google fonts with wordpress.

Ways to integrate google fonts with wordpress

There are hundreds of different stylish google fonts available that are being utilized by a number of websites online because not only they are elegant, but they give more professional look to the sites. Specially the headings placed on sites using google fonts enhance the look itself. There are actually two ways to integrate google fonts in a wordpress site:

1) Wordpress plugin to integrate google fonts: The easy way

The most simplest method to integrate Google fonts is to use a wordpress plugin called "WP Google Fonts". This is the easiest way for the people who are not developers and run a wordpress site by themselves. There is just a need to install the plugin from the wordpress admin panel plugins installer and then configure it after activation, select the required google font, save the settings and you will see your sites font changed instantly.

2) Custom integration of google fonts: Guide for Developers

Developers can custom integrate any required google font into a wordpress site. They can do that by selecting a font from google fonts library and grab the API link. That link will have to be placed before the </head> tag of header.php that is a file available in the root directory of a theme.

Then all that is required to be done is to set the Body font of the site to the font selected that needs to be done inside the style.css stylesheet that has helps in styling a wordpress site. Some sites might use some other CSS file other that style.css , but that can be confirmed by viewing the page source of the site.

How many different Google fonts can be integrated?

There is not exactly a restriction on how many different font styles can be integrated with a site but be aware that integrating more than one google fonts may decrease site's page load time and will have a bad impact in terms of Search Engine Optimization. This is because the fonts are integrated via API, and hence each time the script loads from external google fonts library, it certainly has impacts on the load time of the web page. However google itself provides with a speed meter that tells the impact of integrating a particular font will have on a webpage load time as seen in the image below.

It should me made sure that the needle of the meter remains in the green area that represents that load time is good and yellow indicates that the page load time is not normal, lastly the red means that the page load time is putting a bad impact on site in terms of Search Engine Optimization as well and will provide a bad user experience that is not generally the intention of website owners as they want to keep visitors alive on their site for long periods of time.


Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.