Skill Level: Beginner - Intermediate
Choosing the right fonts for your website can make a big difference to the look and feel of the design. The most important thing to remember is to keep them as clean and as readable as possible. Certain fonts just don’t work on a computer screen and look even worse on a smart phone or tablet. It is always best to test your fonts first before adding them to every part of your site.
Web safe fonts are a small group of fonts that are generally installed on every computer and therefore can be accessed to display on a person’s internet browser correctly without the need of any extra coding. However, certain online resources now allow you to add non-standard web fonts to your site without the worry of your text displaying in the wrong font by placing a small piece of code within the HTML. Popular sites for this are Google Web Fonts and Font Squirrel but whilst choosing your font remember to test it first in different sizes, colours and internet browsers as these can all have an effect on non-standard fonts.
The two logos below are both using the same Google Web Font, yet the first is being shown on Chrome and the second is Firefox. You can see that on Firefox the text is much more stretched out than on Chrome and as a result takes up more space (25px in this case). This could cause issues if you have something positioned to the right of logo as there might not be enough space for it to sit in.
Fonts can be set in just about every section of your design but it is best to keep consistency across the entire site. Stick to just one or two fonts; use a simple sans serif for the main content and navigation links and a more stylised font for the logo, title bars and headings to add interest.
Where to add your fonts
In each tab of the template, within the Template Manager, look for the following fields:
Add a web safe font
Add a Google web font
Add a Font Squirrel webfont kit
Once fonts have been set within the template there is no need to change these when creating your content within Pages, Categories or Products. The only thing you may want to do is add bolding or a specific colour to highlight a small piece of text, which can be done within the WYSIWYG.