How to install Google Fonts on your website
Years ago, we were limited to just a handful of fonts on the web. There were only a dozen or so that all computers typically had in common. Thankfully, web fonts have come a long way.
One of the more popular options now for putting fonts on your website is Google Fonts. While many content management systems and themes will now have them built in, you may want to add them to a site that doesn’t.
You may already know that we at T&S are huge WordPress fans. But we don’t want to leave anyone out! So let’s look at how to use Google Fonts on your website, both with and without WordPress.
How to add Google Fonts to WordPress
First, many premium themes will actually have Google Fonts built right in, as will some page builders. But let’s assume for a moment you don’t have that.
Try the free plugin, Easy Google Fonts.
First, why this plugin? A search in the WordPress Plugin Repository for “google fonts” results in 80 pages. While most of those aren’t actually what we’re looking for, it does mean there are multiple options out there.
Well, Easy Google Fonts passes three of the four things I look for in a WordPress Plugin, aside from it doing what I need.
First, it was updated recently. Last time I checked, it had been updated less than six months ago.
Second, it has plenty of active installations: 300,000+ to be exact.
Third, it has a rating of over four stars: 4.7 to be more precise, which is really good.
The only thing it seems to fall short on is timely responses in the support forum. However, there aren’t a lot of major issues in there, so it’s not a huge concern.
So how does it work? Simply install it like you would any other plugin, then go to Settings > Google Fonts and enter the CSS Selectors you want to customize. Once you’ve saved those, head over to Appearance > Customize, and you can pick your Google Fonts with a live preview.
How to add Google Fonts without WordPress
Okay, maybe you don’t have WordPress. Maybe you’re tied to a proprietary CMS, maybe your site is hand coded, or maybe WordPress just isn’t the best fit in your case. Or maybe you just don’t want to add yet another plugin to WordPress.
Regardless of the specifics, as long as you can insert code into the <head> of your website, you can use Google Fonts.
First, visit the official Google Fonts site and find a font you like.
On that font’s page, click Select This Font on the top right. If you want additional fonts, find them and click Select This Font for those as well.
Warning: The more fonts you select, the longer your website will take to load.
A box will pop up at the bottom. Click on that box to make it display.
Next, copy the Standard code. It will look something like this:
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
Paste that code into the <head> of your web page or website.
Finally, add the CSS that’s also in that box on the Google Fonts site. For example, if you wanted all your <h2> headings to use the Bree Serif font, you would add something like this to the <head> of your web page or website:
<style>
h2 { font-family: 'Bree Serif', serif; }
</style>
That’s it!
Note that in the popup box on the Google Fonts website, you can click on Customize to add more options. However, the more options you add, the slower your load time becomes.
If this is a bit over your head, reach out to your web guy, gal, or company, and they should be able to help out. If you’re paying someone for managed hosting—like T&S—the work may even be included in what you’re already paying.