Are you looking to improve the style and design of your website, but your budget is low? A quick and easy way to freshen up the style of your website is to add Google Fonts to WordPress.
While many WordPress themes come packaged with at least one or two Google Fonts, maybe it doesn’t have the font that is exactly you and exactly your brand. This blog post will show you how to add Google Fonts to WordPress.
What is Google Fonts?
Google Fonts has over 700 web fonts that are open source, which means you can use them without worrying about infringing on someone else’s work. Google has made it very easy to add Google Fonts to WordPress in a few simple steps. With fonts that are free, high quality, open source, and easy to add to your website – what’s not to like – let’s learn how to add the fonts to WordPress.
How to Find Google Fonts
To peruse the Google Font library, visit their website. On the right side of the page, they provide filters, which makes it easy to narrow down the sheer number of available options.
To add a font to your WordPress site, click the red “Select this Font” button to use any font. You will see all of your selected fonts in the “Family Selected” window at the bottom of the screen. A word of caution – using too many fonts can slow down your website so consider limiting the number of fonts to just one or two. After you are finished choosing your fonts, click on the “Family Selected” pop-up window to get the font details.
How to Add Google Fonts To WordPress
Next, we verify the settings of our selected fonts and add them to our website, using the steps that are covered in detail below.
Step 1 – In the “Family Selected” pop-up window, select “Customize” to see the weights and styles available for each font. In order to use these styles and weights on your website, you must check the box next to them. In the example below, I have selected the Roboto font, including the font weights 400 (regular) and 700 (bold).
Step 2 – In the same “Family Selected” pop-up window, click on the “Embed” tab to use the select font weights and styles. Google provides the code we need to add Google Fonts to WordPress. In my example, the code looks like the image below. Note – we only need the web address (https://fonts.googleapis.com/css?family=Roboto:400,700), and not the entire line of code.
Next, navigate to the functions.php file of your theme. I recommend you use a child theme to make changes to your WordPress site. If you add this code to the functions.php file of your parent theme, you will lose this change next time you update your parent theme. If you do not know how to make a WordPress child theme, check out our earlier post.
Using the Roboto example, here is the code to add to the functions.php file of your theme:
Step 3 – Now the font has been added to your WordPress site and is ready to use! In order to use it, we use CSS to apply the font to specific elements of our website. Again, Google provides the CSS code to use in our theme’s style.css file. Under the “Embed” tab of the “Family Selected” pop-up window, look for the code under the “Specify in CSS” section. See my example below:
The beauty of Google Fonts is that you can easily try out different web fonts. After selecting new fonts, simply repeat Steps 2 and 3 to update your theme’s functions.php file and style.css file.