How to: Customise the fonts on your Bluepark website 2 CommentsTuesday, 21 January 2014  |  Cate

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:

• Font (this could be Main Font, Heading Font, Link Font and etc.) – insert the font-family names and separate each one with a comma
• Size – insert the size of your font
• Colour – insert the colour of your font
• Style – options of font styling including bold (B), italic (I) and underline (U)
• Alignment – the alignment of the text within the page, column or block

 

Add a web safe font

• Copy the font-family you want to use from the list on w3schools.com
• Paste it into the relevant font field in the template

Add a Google web font

• On Google Web Fonts click Quick Use on the font you want to use
• Under the Add this code to your website section make sure you are on the Standard tab and copy the link code
• In your template paste this code into the ‘Head section (developers)’ field in the Site tab
• Copy the font family names specified within the Integrate the fonts into your CSS section on Google Web Fonts and paste them into the relevant font field in the template (Do not include the font-family: text)

Add a Font Squirrel webfont kit

• On Font Squirrel click into your chosen font and go to the Webfont Kit tab
• Leave the default settings as they are and click on Download @font-face kit
• Save the file to your PC and unzip it
• Within the website's admin console create a new folder within the File Manager called fonts
• Upload just the font files (.eot, .svg, .ttf and .woff) into this folder

  

• Open the stylesheet.css file in Notepad (Windows) or TextEdit (Mac)
• Between the text url(' and the web font name add the text /user/fonts/

  

• Copy and paste the code into the Additional CSS (developers) field within the Site tab in your template
• Copy the font family specified within the code and paste it into the relevant font field within the template (include the apostrophes if shown)

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.