I have a (not-so-secret) font fetish. I can browse fonts for hours, and love comparing the tiny little nuanced differences between them that saner people claim not to exist. There are so many brilliant fonts out there, but unfortunately when it comes to using them on websites, your options are slightly more limited.
Let’s take a step back for a moment. When people started designing websites, they were constrained to using “web safe fonts”. This is a list of fonts that are most likely to be installed by default on as wide a range of computers as possible. To put it in really simple terms, if your website uses a fancy font that is installed on your computer, but not on someone else’s, they’d just see all the text as an alternative font like Times New Roman. Comic Sans was included on this list of web safe fonts, which led to its proliferation on 90′s websites, because it was the “funnest” font available.
Thank god those days are behind us.
Luckily, web technology has advanced sufficiently to allow websites to display fonts that they can source from a web server, rather than from our own computers. Now there are several ways to use non-standard fonts on your website, the most accessible of which is Google Fonts. A font change can make a huge difference to the individuality or personality of your website, as demonstrated in the screenshot below:
So let’s get started with how to install Google Fonts on both Blogger and WordPress. You can click on any of the screenshots to enlarge them.
Step 1. Go to Google Fonts, and browse the fonts to find one you like. At time of writing, there are 629 available so it might take a while! You can use the filters on the left to help narrow down your choices, and you can even type in your own preview text (such as the name of your blog, or a post title).
Step 2. Once you’ve found the font you want to use, click the blue “Add to Collection” button next to it. A box will pop up at the bottom of your screen, and your selected font will be listed there.
Step 3. If you want to use more than one font (for example, you might want to use one font for your post titles, another for post text, and another for your sidebar titles), add those fonts to your collection as well. But be careful, because using too many fonts can make your page load slowly, penalising you in Google’s search results and causing frustrated readers to give up and leave your blog.
Step 4. Click on the “Use” button on the right of the box at the bottom of your screen, and you will be taken to this page:
Note the page load meter to the right of the various selectable styles. The more styles and fonts you add, the more it will add to your page load. You should ideally try to stay in the green or orange range. I won’t be using any Italic or Bold styles, so I’ll leave them unselected.
Step 5. Scroll down, until you reach the “Add this code to your website” box. Highlight the code within, and copy it. It’ll look like this:
Blogger: Go to your Blogger dashboard, click “Template”, then the “Edit HTML” button. Find where it says <head> (it’ll be right near the top), and paste the line of code from Google Fonts underneath it, like so:
But wait! There’s one extra step! Right before the closing tag >, type an extra /. So it’ll look like this:
WordPress: Depending on what framework you’re running, the best methods for installation can be different. Rather than go into all the details or accidentally misguide you (because it can be confusing if you don’t know what you’re doing), check out this guide at WPBeginner.
Step 7. Great! You’ve now got your blog talking to Google Fonts, and it has your chosen font ready to display on your page. Now you need to edit the CSS. On the Google Fonts page we were on in step 5, copy the code in the “Integrate your fonts into your CSS section”. It looks something like this:
Step 8. Identify what type of text you’re changing the font of. Is it the post title, or the body text? Find the CSS code that applies to that type of text (for example, h3, or body), and use Ctrl+F to find it in your CSS (in Blogger, this’ll be the same Edit HTML page we were on. In WordPress, it’s your style.css stylesheet). Then, paste the code into that CSS rule, like so:
Click Save… And that’s how to install Google web fonts on both Blogger and WordPress! Super easy, right? This is what my draft blog looks like now:
I hope I explained the steps clearly enough. As always, if you have any questions just leave a comment below!