Using the global fonts tool

You can find the global fonts tool by clicking 'Extras' from the Main Options, followed by 'Personalise', then 'Global fonts'.

This tool can be used to set font sizes for headers and body text, line-heights and other styles that will all be proportionate to each other and apply across the whole of your website.  This is vital for achieving a consistent and professional look. A lot of people only use the font settings in ‘Change Content’ to format their websites, but once you feel confident with your website; we reccomend you try using 'Global fonts'. Once you have set up your global fonts, you shouldn't have to use random text formatting in 'Change Content' as you will be able to apply your set styles using the style drop down list, found in the last row of icons when you are in 'Creative' or 'Advanced' mode. All you need to do is highlight your text and select the relevant font style.

When the 'Global fonts' page appears, you will be presented with three tabs:

Font styles

Here you can select the font styles for:

Large header - in 'Change Content' this will apply to anything you set as 'Header 1' in the style drop down list

Small header - in 'Change Content' this will apply to anything you set as 'Header 2' in the style drop down list and also to any widgets you select in 'Add widgets'

Paragraph fonts - this will apply to the main body of your text. In 'Change Content' this appears as 'Normal' in the style drop down list

Link fonts - this will apply to any hyper links you have made in your main body of text and applies automatically

Simply select the font you would like for each, from the drop down list. you can also bold, italise and capitalise your fonts, as well as choose whether you would like to underline, throughline or overline any hyper links on yoru pages.

Font colours

With this option, you can choose colours for your headers, paragraphs and links. Either click the box next to each to bring up the colour picker box, or, if you already know the colour you want, type in the hex number.

Some colourful advice:

You should select your ‘Paragraph colour’ wisely – remember it will apply to virtually every element on the page, apart from your headers, links and menus. Your colours can have a drastic effect on how visitors portray your website, especially on first viewing. Having bright text on an even brighter background will almost certainly turn visitors away. There are a lot of great resources online, like , which can give you some insight on colour schemes for your website.  

One of the great things about the ‘Global Fonts’ tool is that you can also insert a HEX colour (this looks like #399382), so it’s a like picking a paint colour when decorating your flat or house. Perhaps give your ‘Large header’ a lighter grey colour than your ‘Small header’ and your body text a nice dark grey to accentuate it – the possibilities are endless. Parts of your chosen template will also respond to the colours that you choose in the ‘Global fonts’ tool. For example, all of your widget titles will display the same colour that you choose for the 'Small header' colour. However, font size and some of the more advanced settings won't apply to this purely because changing the settings could adversely affect the look and feel of your template.

Font style advanced

This where the magic happens! This option allows you to create really great styles for all the content on your website; just use the preview panel to check how everything looks.

Font size - the default size for this is 12px. It applies to the size of your body text and hyperlinks, and is the standard size for any website. If you want to change the size of your body text, use move the slider up or down. The headers will then correctly proportion themselves based on this; so you won’t need to worry about setting these

Line height - the more you increase the ‘Font size’, the more line height you will need. If you plan on sticking with a 12px font throughout your website, then use the 15px line height. But if you plan on going a little larger with your base fonts, go up to 18px for line height (or perhaps more) to avoid your text overlapping - this is where a lot of people tend to go wrong

Word and letter spacing - use this option wisely and with caution! Using anything -10pt for your word spacing or -0.5pt for your letter spacing can cause some strange textual behaviour

PLEASE NOTE: If you set a line height of 15px in the ‘Global fonts’ tool and then select a larger font size in 'Change Content' – your text will still use your selected line height of 15px. So, if you find text overlapping, this will be why.

Ideally, the ‘Global Fonts’ tool should be used as a starting point with a fresh website; but it is possible to apply to an already created web page with caution!

When you modify font colours and sizes in 'Change Content', the editor applies something called ‘HTML tags’ directly to the text…yes, that is the techy bit over but it’s just how websites work. These tags will normally override any styles set in ‘Global Fonts’ and can create a few ‘code nasties’ for when you try to start applying styles; meaning it might not always look how you planned. Luckily, there's an easy fix for this.  If you have a page with already created and formatted content then you can use the ‘Remove Format’ button in ‘Change Content’ – it looks like an eraser and is in top row of icons – it’ll clean out your old formatting and take away all the old HTML code.