Choosing Fonts for Your Website
Last Updated on June 26th, 2020
Fonts are one of the key ways to personalise your website. However, there are some important things to know first before choosing fonts for your website. Like how many fonts is too many fonts and how can you ensure that the font you pick is one that every browser will recognise?
How Many Fonts Do You Need?
Quick Answer? Aim for two fonts. At the most, choose three.
Let me explain…
The more fonts you add to your website the slower your website will load, and page-loading speed is a very important metric in a site’s ranking potential.
The ideal is to aim for two (2) fonts: one used for your page titles/headings (also called your H1, H2, H3, H4, H5 and H6 headers) and one used for your body text. (The font used in your navigational menu tabs is usually the body text in uppercase).
It is best practice to set the H1 and H4 header in UPPERCASE and the other headers in Sentence Case. The H1 header is used for the main page title and H4 header is used in in the headings of a page’s sidebar (if it has one). Plus, the headers decrease in size, H1 being the largest and H6 the smallest. You could also italicise the H2 header to give it distinctiveness.
In other words, use size, italics and uppercase to give your font choice distinction across your site. For an excellent example of using one font in a host of different ways on a site, see here.
Here’s an example of the use of the H1-H6 header styles using Helvetica font for all the headings and the body text. (You’ll notice that the “Recent Posts” heading in the sidebar uses the H4 header).
You will need to first select the font you want and set it as a default (we’ll do this second step for you), but thereafter, WordPress allows you to easily select these header options in the backend page/post editor:
At most, choose three (3) fonts. In this case, choose one font for your Page/Post Title (H1 header), a second for your subheadings (H2-H6), and a third for your body text. The font you choose for the Page/Post Title can then also be used for special text such as catch phrases, motivation text or brief testimonials.
Choosing Fonts? Where?
You can purchase unique fonts, but beside the fact that this can be an expensive exercise (especially if you may want to change your fonts from time to time), you also run a risk: there’s no guarantee that others will see the font you buy. The more unique the font is the more likely it is that your site visitor’s browser may not be able to read the font. In such a case, their browser will replace the unidentified font with a generic font. Hence, the money spent on an expensive fancy-looking font is wasted.
Therefore, it is best to stick with either Web Safe Fonts or Google Fonts. Choosing from these FREE fonts ensures that the font you select actually appears in your site visitor’s browser.
Web Safe Fonts
Although Web Safe Fonts are limited, they are a great choice for body text because they feel familiar to people and they are easy to read. Web Safe Fonts include Arial, Courier New, Times New Roman, Helvetica, Comic Sans, Impact, Palantino, Georgia, Trebuchet and Verdana. For an excellent article on Web Safe Fonts, see Sixteen Gorgeous Web Safe Fonts. By default, WordPress comes stacked with many of these fonts.
Google Fonts
Google Fonts offers far more variety (nearly 700 fonts) and is the way we suggest you go. If you’ve purchased out Classic or Premium Theme, you’ll have easy access to all these fonts and you can start perusing your options here: Google Fonts.
Get a cup of coffee and hunt down the two or three fonts you’d like to use on your website.
If you haven’t purchased our Classic or Premium Theme (or don’t use WordPress), this comprehensive article is extremely helpful in how to use Google Fonts. Need something simpler? Keep reading…
Using Google Fonts
Here are a few tips and tricks for using Google Fonts.
- Insert your own text.
Google offers a silly default sentence to view each font. Insert your own text using keyword phrases that will appear frequently on your site as indicated below.
- Switch between word, sentence and paragraph view.
To get a better view of how your font will look as either heading text or a paragraph text, switch view as shown below.
- Use Google’s pairing suggestions to help.
Once you have found one font that you like, use Google’s pairings function for suggested fonts that go well with yours. First, select the little Pop-out icon to the right of screen.
When the pop-up appears, select the Pairings tab as shown below.
I trust you found this helpful. Let me know if you have any questions.
