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:
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.
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
www.colourlovers.com , 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.