What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Use Google Fonts in WordPress Websites?

How to Use Google Fonts in WordPress Websites?

WordPress is said to be the leading platform that is preferred by millions of potential website owners. However, this platform doesn’t impress its users by its fonts. Hence, the last resource available to meet the desires of all stylish website owners is Google font.

As the name speaks, it is a collection of fonts stored in the cloud under the authentication of Google. Developed in the year 2010, it is an interactive directory of fonts that can be used by multiple online platforms, so that the content can blend properly with the layout and theme of a webpage.

Although thousands of people know that Google Fonts can be used in multiple platforms, very few of them know how to use Google Fonts properly. Before proceeding further, there are a couple more things to know because webmasters must know the benefits and importance at the time of customizing the fonts.

Benefits of Using Appropriate Fonts in Websites

In the era of advanced optimization, the fact is inevitable that every factor of a website counts. When it comes to fonts, it is indirectly associated with the frequency of traffic on a website. This is because fonts play a vital role in determining the clarity of content, as well as the appearance of the website.

A website having poor font customization cannot receive a remarkable amount of traffic as the visitors don’t prefer to visit websites with unclear message or text. Hence, it is one of the major reasons as to why every website must have an appropriate font.

Now, when it comes to the appearance of a website, a combination of font with the layout or template plays an imperative role. A font that blends well with the layout and the niche enhances the appearance of the website.

Google Web Fonts

For instance, a professional website or a blog reflecting a serious concern must have a formal type of font, such as Times New Roman. Similarly, a slightly cute font can be used in a child or pet-related website. However, one thing should always be kept in mind, i.e. the motive of an effective font.

A font should be such that the reader can read the content without pressurizing much on understanding the font. Hence, every website should have a user-friendly font that blends well with its templates and niche.

Techniques of Customizing Google Fonts in WordPress Websites

There are a tremendous number of methods to customize the font of a WordPress website. While some ways are easy to execute, there are a couple of ways that are not equally easy. However, discussed here are a couple of the most effective techniques to customize Google Fonts in a WordPress website.

Plugins Utilization

Google Fonts PluginAs one in every six websites run on WordPress, there are thousands of plugins for the premium online platform. Presented in the online market is a tremendous amount of themes and plugins that involve support for Google Fonts. The presence of Google Fonts in a plugin accelerates the essence of the website and allows the owners to have a notable font for their website.

It is the easiest way to learn how to use Google Fonts on a WordPress site effectively. Websites can have a collection of customized Fonts by getting the authority to access Google Fonts. Some of the most-used plugins for utilizing Google Fonts are WP Google Fonts and Easy Google Fonts. These plugins are not only powerful in its task, but also reliable and safe to use. This technique of using and modifying a Google Font is the easiest way of getting access to the authorized cloud-based internet server. Thousands of newbies prefer it in the field of developers.

The installation of plugins in a website that runs on WordPress is quite easy. All one needs to do is to follow and execute a couple of easy steps in this page. Taking Easy Google Fonts as an example, here are the steps that webmasters should follow to install it on a WordPress site.

  • Firstly, search Easy Google Fonts on the internet and download it. You can get it from WordPress.org.
  • Secondly, unzip the file and upload it in the admin panel of the website from the “Plugins” tab.
  • Lastly, activate the plugin and make some configurations based on your needs.

Easy Google Fonts Settings

It should be noted that all kinds of Google Fonts plugin can be installed to a WordPress website by following the same procedure.

Divi 2.0 Theme Utilization

Another easy way of using attractive fonts in a WordPress site is by making some of the functional WordPress themes that contains loads of Google Fonts available with a free customization. Gaining popularity since its launch, Divi 2.0 has many features for WordPress users, which also includes various fonts. To customize the fonts, there are a few steps that are to be followed.

  • The first step is to open the Customize section of the admin panel in the WordPress site.
  • Next, choose a specific style or multiple styles for websites.
  • Lastly, apply the theme through the admin panel. Thus, all the content along with the header and footer of the website can change to the desired font.


There are many methods of using Google Font in a website, such as the coding stuff that is preferred by experienced and talented developers. However, not all the webmasters succeed in bringing a change in the website’s font by the technique of coding, so we highly suggest you to pick one of the two introduced methods.

Whatever the technique you choose, the most-imperative task is to know how to use Google Fonts effectively to enhance the appearance of the website, and let the readers go through the content smoothly.

Using the Code

If you do not prefer using a plugin and don’t want to spend a couple of dollars on the WordPress theme, there is always another effective option – using the codes. WordPress is preferred by thousands of developers because they get the opportunity to execute their ideas on the site through the coding method. So, how can you change the font of your site using codes?

To start with, you should navigate to the Google Fonts Library and check the list of available fonts. The fonts are grouped on the basis of their characteristics, categories, and script. To be precise, you can choose the thickness or width of the font from the characteristics, basic typography such as Serif or Sans-Serif from the categories and styling such as Greek or Latin from the scripts.

Once you select a font, you should click on the Quick-use option. This will take you to the next page where you will find a code that looks like the following screen.

<link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />

This code should be copied to a notepad where it can be retrieved when needed. If you wish to combine two Google fonts, you should repeat this procedure and select another font. Once done, you need to separate the two fonts using this “|” character.

Now, you need to open the header.php file using an advanced editor and place the copied code at the top of the page. It should be noted that if you place the code in the middle or at the last portion of the page, the loading speed of your website may slow down.

After saving the header.php file upon modifications, you can use the fonts on the CSS file of your installed WordPress theme. This can be done by using the following code.

h1 {
   font-family: 'Oswald', Helvetica, Arial, serif;

Upon completion, you will notice that the font of your website has changed successfully.


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.