13 May Add Google Fonts to WordPress
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 in a few easy steps!
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 left 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 blue button “Add to Collection.” You will see all of your selected fonts in the “Collection” 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 “Use” at the top, right of the Collection window.
How to Add Google Fonts To WordPress
Next, we verify the settings of our selected fonts and add them to our website, using the 4 steps outlined by Google, which are covered in detail below.
Step 1 – Google Fonts will show you 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 300 (light) and 400 (normal).
Step 2 – select character sets, as needed.
Step 3 – 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,30), and not the entire line of code.
Next, navigate to the functions.php file of your theme. Using the Roboto example, here is the code to add 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 blog post.
Step 4 – 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. 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 3 and 4 to update your theme’s functions.php file and style.css file.