If you're branding (or rebranding) your blog, fonts are one of the key decisions you'll have to make. How to pick fonts for your blog is a crucial part of your brand, and how readable your site will be. There are no hard and fast rules about which fonts are “good” or “bad,” but there are some guidelines to follow when picking a font out there to help you out.
Let's check it out.
How to Pick Fonts for Your Blog
This post contains affiliate links. You can read my full disclosure right here.
Types of fonts
Technically there are more than four kinds of fonts (for real typography buffs), but for our purposes, these are the basic four. How to pick a font starts with knowing what types of fonts are out there, right?
A serif font is one that has little “legs” on the ends of the letters. If you ever had to write a book report in Times New Roman–that's a serif font. They're generally thought of as more traditional. Some studies say that they're easier to read as well.
Sans Serif Fonts
San serif fonts are, not surprisingly, fonts without serifs. The heading and body text on this site are both sans serif fonts. They're generally thought of as a little more modern.
Script fonts are or handwritten fonts. You wouldn't want to use them for your main text, but they can be great to highlight a headline. The cursive font I use on my homepage is a script font.
Decorative fonts are basically novelty fonts. They can draw attention and they have their place, but you shouldn't overuse them.
Things to keep in mind when choosing a font
Before you choose a font, think about what you want to convey. When asking how to pick a font, you've also got to ask how do you want your website to “feel”?
Even before a customer reads the message in your marketing, the font is already communicating something to them.
Fonts may seem trivial, but they can really affect your site and your branding.
Of course, you also need to consider legibility. No matter how pretty the font is, if it's not easily readable on the computer screen and on mobile, it's gotta go. Never pick a font that's not legible on both desktop and mobile.
You'll likely want 2-3 fonts for your branding and your website. One font for headings, one for body text (although you could use the same one for both). and one extra for things like the logo or the occasional callout.
You might be wondering “how do I pick fonts that go together?” When pairing fonts, it's important to have some contrast and to make sure that they look good together on the page and convey the same message. When thinking about how to pick a font, pairing is an essential element.
Sometimes you’ll want something that really pops, and other times the context will require a font that’s not distracting, such as for long passages of text.
Serif and Sans Serif usually make a good pair. If all else fails and you really get stuck, having a serif headline and a san serif body font, or vice versa, usually makes a good choice. It'll allow you to emphasize what you want, while still remaining readable.
Where to find fonts
These days there are tons of places to find fonts online. But when thinking about how to pick the right font, a few font-picking websites that I like are:
You can also check out Google Fonts, which are free, and often come with your theme.
How to use custom fonts
If you're moving beyond the fonts that come with your theme, you've got a few options for how to install those fonts:
Fonts that come with your theme
All themes should come with at least some fonts. Sometimes the included themes are robust, sometimes, not so much. If you like the fonts that come with your theme, great! One less thing to do. But if you're looking for something a little more special, these are some great options.
Typekit is a subscription service from Adobe that offers thousands of fonts. Depending on the font, it can be used either on the web or on your computer (or sometimes both). It's a great option if you're looking for a new font.
When you find a font you like, you'll add it to a “kit,” add in the site that you want it installed on, and then hit publish.
Back on your site, you'll need to install the Typekit plugin. This will allow you to assign your chosen Typekit font(s) to use on your site. To do this you do need to know a little bit of code, but it's easy.
Say I want to use the font Brandon Grotesque as the Header 1 font on my website. The code would look like this:
font-family: “Brandon Grotesque”;
That code tells the computer that all Header Ones should use the Brandon Grotesque font.
You can also add other elements, such as font weight. That would look like this:
font-family: “Brandon Grotesque”;
I use Typekit on my site to provide me with two different fonts. When you fall in love with a font, you've just to have it, right?
Use Any Font plugin
The Use Any Font plugin allows you to upload custom fonts to be used on your site. This works well for fonts that you bought somewhere like Creative Market. After uploading the font (make sure that you have permission to use it this way first), you'll then need to select which HTML tags you want it to be applied to.
Easy Google Fonts plugin
The Easy Google Fonts plugin installs a wide variety of Google fonts on your site. And it will put them right into the theme customizer, so you don't need to code anything on the backend. This is a good option if the font you want is a Google Font.
So that's a wrap on fonts for today. Do you have any favorite fonts that you just can't live without? Let me know in the comments!