Choosing Fonts for Your Website
Last Updated on January 18th, 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: