Designing a website is easy, especially when we've done all the hard work. Choosing the right fonts for it isn't so easy, especially if your branding identity doesn't have any defined. Your chosen website font is one which helps tie in all the other elements within your website, including your logo, colour scheme, navigation and layout. Then it also needs to be easily readable regardless of the type of device it is viewed.
To make things simpler, we've put together some things to consider when picking your website fonts, along with examples of popular web fonts.
Ultimately your chosen fonts must work with your brand, which has been created with your target audience in mind. Graphic designers will choose a font or more which best match your branding guidelines, and will usually let you know what they are called. These fonts are sometimes able to be used for headings and paragraphs, while some are only suitable for graphics and your logo. In saying this, you will still need to choose whether or not to use these fonts within your website or not, where these tips will help with that decision.
Let's take a look at some of the most popular website fonts.
Everyone has an opinion on which font is their favourite, as as such, there are many different font popularity lists. We recommend using a Google Font, so we've put together a list of the most popular Google Fonts:
According to Google Fonts, their first eight most popular fonts are Roboto, Open Sans, Noto Sans JP, Lato, Montserrat, Roboto Condensed, Source Sans Pro and Oswald.
This is followed by the next eight most popular fonts: Poppins, Roboto Mono, Raleway, Noto Sans, PT Sans, Roboto Slab, Merriweather and Ubuntu.
As well as a list of step by step instructions, we've also put together a video demonstrating how to add a Google Font to your website.
If you have chosen to add a Google Font to your website, this is easily achieved through the Design area of our CMS. Follow these steps:
1. In Google Fonts, choose the specific font variation you want and click Select this style.
2. Copy the standard link option you are shown, along with the Font Family name so they can be pasted into your website template.
3. Login to the CMS and select the Design tab, followed by the Colours and Fonts tab.4. Click on the Custom Fonts (Import Google Fonts Code) edit button.
5. Paste the Google Font link inside the editor and click Save Changes.
6. Now paste the Font Family name into one or both of the font name options to tell the CMS which font to use for your website, and Publish:
Posted: Thursday 18 March 2021