One of the first things a visitor to your website will notice is the style of fonts used on the site. Alongside the imagery and the copy for the site, the fonts will give the visitor an idea of what to expect when on your website.

For example an elegant, script font implies the owner of the website is thorough, elegant, committed to detail and trustworthy. A playful font is often used in nursery and early years education settings to denote a fun, playful setting. Industrial websites tend to use no-nonsense, easy to read fonts.

Getting started

Begin by working with the rule of choosing two opposite fonts for your website – ideally these would break down into one serif font and one sans-serif font. In layman’s terms this means:

Serif fonts: have additional strokes – i.e. tails at the top and bottom of letters:

This is a Serif font

Sans-Serif fonts: don’t have the additional strokes so are easier to read.

This is a Sans-Serif font

If you struggle to find fonts which complement each other there are a couple of ways to get help:

Searching Google Fonts – choose one of the fonts to explore by clicking on it and a box will come up on the page saying fonts which work well with the one you have chosen.

Use a paid for font-set. Which have been designed to work together.

Where to find fonts

There are many places to find fonts for your website. Start with Google Fonts.

Pros

  • They’re free.
  • They’re optimised so will display well on desktop and mobile devices.
  • Most website themes will have Google font options built-in so they’re easy to choose.

Cons

  • They can be a little basic in design.
  • There’s not always a desktop/importable version to work into the rest of your branding.
  • They don’t always have as much personality as a paid-for font.

Can’t find something you like? Here are some places to find paid-for fonts:

Click on the name of each one to have the website open in a new tab.

Not feeling flush? Here are some links to websites offering free fonts:

Click on the name of each one to have the website open in a new tab.

In all cases when downloading and using fonts, whether they’re free or paid for, make sure you have the correct license for your needs.

Want to break the rules?

In some (limited) cases you may want more than 2 fonts for your website. This could be for a specific product/social media advertising etc. In these cases you can introduce a third font. Do think carefully before doing it as the more fonts you use on a website, the messier and more disjointed the site will look and it won’t only confuse your visitors, it may undermine your authority on your site. After all, if you can’t decide on a font, how can you be making good decisions which will help your customers?

When using more than 2 fonts consider using the 3rd font only in call to actions. For example you may like to have your call to action (contact me etc) in a handwriting font.

Or you may like to use it layered on images. You’ll notice on this website that the handwriting font used in blog images is different to the other fonts on the site and it’s only used in images.

The technical bit – uploading fonts to your website.

You’ve chosen your font and now you need to upload it to your website. There are 2 ways to do this:

Using Google Fonts in your website.

Most themes will already have Google fonts enabled. Simply go to:

  • Theme Options
  • Typography
  • Body Typography
  • Font Family

Choose your font from the drop-down list and set the size/weight/colour/spacing and line height. You don’t have to adjust the spacing or line height if you’re happy with it as is, but adding a little wriggle room on the line height will make it easier for your website visitors to read.

Save your options then go to:

  • Theme Options
  • Typography
  • Heading Typography
  • Font Family

Repeat the process with your chosen fonts.

Uploading Custom Fonts to your website.

When you buy a custom font it will be delivered in a downloadable format, often as a zip file with different options. The main ones are:

WOFF2

WOFF

TTF

EOT

SVG

Save all these files to your desktop then go to your website dashboard:

  • Theme Options
  • Typography
  • Custom Fonts
  • Click ‘Add’
  • Type in the name of the font.
  • Upload the different versions of the font in the set spaces.

You don’t have to have every version of the font files for this to work, you can just upload one version of the font. However, different browsers (Safari, Chrome, etc) use different file formats so if you want to cover all bases and have your website appear consistently across the different platforms then upload all the versions.

If you don’t have all the different versions needed you can use this free conversion tool.

Once you’ve done this – refresh the page on your dashboard, go back to:

  • Theme Options
  • Typography
  • Select either Body or Header Typography,
  • Font Family

Your custom font should then be at the top of the list.

Go on to set the colour/spacing/size/weight etc as above. Be aware that some custom fonts will have limited options and may not have the options of different weights or styles.

Setting Heading Typography

Website dashboards will offer you Heading options of 1 – 6, often shortened to ‘H1, H2, H3, H4, H5, H6’. Usually these will also show the order of size with H1 being the largest and H6 the smallest.

Using Heading typography in websites is important for the layout of text so the visitor can read things clearly and understand the importance and relevance of the statement made by the text. Heading typography uses slightly different code to body text for search engines to pick up when crawling websites for search results so good use of Headings can help with your SEO.

In most cases you will only use Headings 1 – 3 on a day-to-day basis. By this I mean in the copy of your website and your blog posts. However it’s important you set and format the other Heading Typography settings (4-6) as themes will use these in other website elements for example: widget titles, counter circles, content boxes etc.

Pro Tips

Handwriting and Script fonts  can be beautiful but sometimes hard to read. Consider spacing the letters out a little. You can do this when choosing the font using the instructions above and filling in the ‘letter spacing’ field. Start with 3px and see how you get on.

Line Height can make a big difference between copy looking squashed together or just right. Set a line height in your typography settings between 1.2 and 2.0. My personal preference is for 1.5.

Consider using your serif font for your H1 and make your H2 – H6 typography the same as your body copy but with a bigger size and heavier weight. This will give good consistency across the website and you can use H1 when you want to make more of an impact.

For SEO and a good visitor experience only use H1 once on any web page. For all else, use H2 & H3.

Feeling overwhelmed and bewildered with all the choices? Consider using a branding designer who can make these choices with you, complement your overall branding and deliver the font files  with appropriate licenses, to you.

Want to know more about websites?

If you’re interested in learning more about websites including:

      • Editing website content
      • Building layouts
      • Creating websites from scratch

Then come and join my FREE Facebook Group – The Website Coaching Academy

Join The Website Coaching Academy on Facebook