Lets Talk About Fonts - what are the font options to use on your website

One of the most common question I’m asked by my clients is why can’t you use a nicer font on my website? The answer is not that simple as changing a font…

So what is the best font to use on your website?

There are basically 3 options when using fonts on a website:

1. Web Safe Fonts

a web safe font is a font that is most commonly used on majorities of computers / devises. If you use an unusual font that is not installed on your user's computer, the site will default to the next in the ‘font family’ this means the site will look different than what you want it to look. You will notice for example on Blogger there is a selection of only 7 fonts to use as they are 'web safe fonts'

For most of the body test within the website it is best practice to use one of these web safe fonts: Ariel, Helvetica, Times, Verdana...

2. Google Fonts

Google introduced a set of fonts that can work on a website and will be viewed as they are. This is by using a script in the code that enables users to view the font even if not installed on their devise. This can slow down the site performance a bit but you can see this on the font page.

I recommend to use Google fonts as a secondary font for headings on the site as for body text the basic fonts are still the best.

Check out the verity of fonts on GoogleFonts

3. Fonts as Graphics: 

On many website you will still see very creative fonts used for banners and headings – in most cases these are actually graphics (JPG, PNG) that are created with a design software and placed as an image on the website.

This technique was heavily used a few years ago but less and less today. This is mainly due to 2 factors: images can be slower to download and on mobiles it is a problem and (probably main reason) Google cannot ‘read’ images on your site so it makes it harder to index it.

Still there is a place for graphics as they do make the site look better. Make sure you only use for banners and ads - not as headings or menu!

This example demonstrates all 3 usages on one website:

Meirav Dulberg