PHPMatters Help You Better Hosting Your PHP-based Sites
How to Use Google Fonts in WordPress - 3 Easy Methods Explained

How to Use Google Fonts in WordPress – 3 Easy Methods Explained

With the ever-increasing essence of website design, Google Font has developed as an efficient tool for web designers. If you own a WordPress site, you can enhance the appearance of your site by replacing the standard font with the stylish Google fonts. Google offers a huge list of typography styles that can be selected appropriately for the genre and theme of your website. Now, if you’re thinking as how to use Google fonts in WordPress, this is the right place.

Generally, there are three methods for the utilization of Google fonts – Google font plugins, premium WordPress themes that have dozens of built-in Google fonts and coding stuff. Now, let’s discuss them one by one.

Using a Plugin

There are dozens of plugins that allow you to change the font of your website. To install any plugin, you only need to download it on your desktop, upload it to WordPress and activate it. Once done, you can pick the desired Google font from the list conveniently.

Here are some popular plugins that add Google fonts to your WordPress site easily.

Font

Website: https://wordpress.org/plugins/font/

Font allows you to modify the texture of the content by changing its fonts, effects, and colors. You just need to dig into the Font Settings tab and make the customizations based on your preferences. After that, you can hit the Save button to change your site’s font.

Font

WP Google Fonts

Website: https://wordpress.org/plugins/wp-google-fonts/

This is one of the most powerful tools that allow you to customize up to six fonts in your site. For customizing the text after installation, you should visit the Settings menu. Here you get the option to choose the font, determine the area where it will be used and the type of characterizes it will reflect. Modifications can be saved by clicking on the Save All Fonts upon completion.

WP Google Fonts

Easy Google Fonts

Website: https://wordpress.org/plugins/easy-google-fonts/

If you do not like to play with the code, Easy Google Font is the ideal plugin for you. This plugin can be installed on your site easily, and you can choose a specific typography from the list of fonts, colors and styles. You can modify this through the Google Fonts menu presented in the Settings section of the plugin.

Easy Google Fonts

Using a Premium WordPress Theme

Millions of premium WordPress themes that can change the appearance of your site completely are available online. These themes render a fresh look to your website with different functions, tools, and effects. Generally, almost all the quality templates involve the presence of several fonts that are also offered by Google. Therefore, you do not need to drop into the Google fonts library as you can get the fonts from your theme files.

Now, you should browse through various premium themes for WordPress and download the appropriate one that supports the in-built Google fonts. Then, you need to upload the zip file to your themes directory. Once the theme is loaded on the site, you have to dig into the WordPress dashboard to find the Appearance menu. Here, you should click on Themes and activate the downloaded one after finding it.

Once the theme is activated, you should navigate to the Customize section through the admin panel. Here you will find the list of available fonts. You can choose the desired one for the headers, footers and the body section of your WordPress site.

To make your life easy, we have already recommended some great options in this page, among which Fall is the best one, offering more than 500 Google fonts in total.

Fall

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.