SHUT YOUR FONT FACE, THAT'S EASY


S02 | E04 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  2 min read |  3 min video

Web School Series 2 Episode 4

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


Keeping consistent styling throughout your website is important for your company brand. In your MOBLE website, you can configure your Fonts in one location and they will update automatically on every page of your website.

As a designer, you can determine the creative for the brand when you initially design your website, and as a business managing the content, you can be confident that the company's branding is always preserved as you edit your pages.

Should you wish to make wholesale changes to your brand in the future, such as logo change that requires a change in fonts, you can make your changes here in moments and update your entire website. 


1. GO TO THE FONTS AREA

To get started, open the Main Menu, select 'Styles' and then select 'Fonts'.

You will be presented with a list of the different Fonts options available to you.

MOBLE CMS Colours

Select and customise Fonts on the left and Preview your modifications on the right.


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.

Heading and Style Elements

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.

Your Font selections are available in the Visual Page Editor


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.

MOBLE CMS Font Selections

Select your fonts from the dropdown list.


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.

MOBLE CMS Fonts Preview

Configure your fonts via the customise button


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.