2. FONTS IN THE VISUAL EDITOR

It is important to know that your Font selections in the Styles area are made available in the Visual Page Editor, via the Formats tab as shown in the Video below.

It's often considered best practice to have one Heading 1 on a page. Logically, you will make your Heading 1 the largest and most prominent. However, in modern day website design, you may wish to have large fonts lower down the page, and such text might not have any benefit for search optimisation, it might simply be a bold statement or call to action.

For years there has been much debate in regards to structuring your Heading Tags for SEO best practice. Without getting bogged down in the nuances between different search engines and W3C HTML standards, MOBLE provides a simple solution that gives total flexibility.

The video below demonstrates how you can select both Headings and Styles. For example, you can make large Style headings lower down the page, and give them any Heading Tag that you wish.

THIS HEADING IS 'STYLE 5' AND 'HEADING 2'

If you prefer to follow traditional best practice formatting, you might set your page up in a well-formatted hierarchy of Heading tags. You would have one Heading 1, then as you progress down the page you might have a couple of Heading 2's, a few Heading 3's, etc.

<h1>Heading 1</h1>

<p>Text</p>

<h2>Heading 2</h2>

<p>Text</p>

<h3>Heading 3</h3>

<p>Text</p>

We recommend that you be consistent across your pages. Do be conscious of Headings, at least respect the Heading 1, though there is perhaps no need to have a relentless pursuit of the perfect structure. Put your user first, search engines, such as Google, prefer not to be manipulated and are smart enough to handle your preferred consistent structure.

3. SELECT YOUR TYPEFACE

You can select a Typeface from the dropdown list. MOBLE has selected the best Google Fonts for you to choose from. You can also install your own Fonts from Typekit.

4. CONFIGURE YOUR FONTS

On the left of the screen you can type inline to view your fonts and automatically preview on the right.

Once you have selected the Type Face, you can now customise the font. Here you can use the sliders to ensure the Font is exactly as you desire.

You can change the Font Size on Desktop and Mobile. Notice that you can also Preview the Font on each device using the Device buttons on the far right of the preview pane.

As you would expect, you can also amend Line Height, Letter Spacing and Font Weight.

Over in the page editor, you will also be able to apply Bold and Italic, assuming these are available in the font that you have selected.

5. INSTALL YOUR OWN FONTS

It is also possible to speak to a Frontend developer to install your own custom font. For example, MOBLE use a Font called Sofia Pro which is not a free Google Font. If you require assistance installing a custom Font feel free to contact us via www.moble.com/lets-talk. 

6. TYPEFACE AND PAGE LOAD SPEED

MOBLE recommend that you only use a maximum of three different font families in your website, as this will ensure that your page loads quickly and no doubt make it easier on the eye. 

DID YOU KNOW?

WHAT IS CSS?

CCS or Cascading Style Sheets is a language that describes elements of HTML, such as fonts, colours, margins, lines, height, width, background images, advanced positions and more.

Think of CSS as a way to save time. If you have a yellow button that appears in many locations throughout your website, and you decide to turn the button into a more rustier yellow, with CSS you only need to change the button colour once, and it will then update in every location around the website in an instant.

It is not just the button colour that can be controlled in CSS: it could be button hover colour, button padding, text size, character spacing, height and shape.

Your MOBLE Styles area allows you to select and change the most common parts of your CSS. If you understand HTML, CSS & JSS you can extend the framework and design without restriction. We'll cover more on this in Series 6.