Google Fonts are an amazing resource for WordPress users, giving your website an instant lift by changing the typography of the webpages. Google currently has over 600 different fonts available to use free. Here we will show you how to easily add your chosen font to your site.
Adding Fonts Manually
Adding Google Fonts to your theme manually is certainly the most difficult option and, if you are not comfortable with code, you should skip this part and scroll down the plugin installation. If you like to get hands on with the inner workings of your site however, here’s how to add fonts the manual way.
To get started, go to Google Fonts and browse through the available fonts. Once you’ve found one that you like, click on the Quick-use icon and scroll down to the Add this code to your website section.
The easiest of the methods is @import. This simply involves copying the font code from Google and pasting it in the style.css file of your site. The code will look like this.
The @import method may affect site speed and page load time, so if this is an issue to you then the standard code may be the preferred method.
The standard code will look something like this:
<link href='http://fonts.googleapis.com/css?family=Revalia' rel='stylesheet' type='text/css'>
You should place this code in the header of your theme, by pasting it above the main stylesheet in your header.php file.
Adding Fonts with a Plugin
As with most things in WordPress, the best way to add Google Fonts to your website is by using a plugin. There are several plugins that can help you do this, but the one we recommend is Google Typography. You can download this plugin by going to Plugins > Add New and entering ‘Google Typography’ into the search field.
After installing and activating the plugin, you can visit the Google Typography settings page to preview the fonts. However, it is easier to visit the Google Fonts library and choose your font from there.
Once you have found the font that you want, go to Appearance > Typography > Add New and select it from the Font Family dropdown menu. From there, select the color of the font and enter * in the CSS selectors input.
Click on Save to confirm the changes.
Go to the front end of your site and refresh the page. Your site should now be displaying your new font.