WORKING WITH FONTS
Comprehensive Overview

A key to working with fonts is the Use Any Font plug-in.  To use the plug-in, assure that the website is installed to Use Any Font.com.  (I have an unlimited lifetime License there)

This plug-in allows you to upload any font and assign a different font to each H tag (H1 - H6) and also the body or paragraph tag.  The Vantage theme has all of the Google Fonts installed for use, but you can only assign 1 Font to all of the H tags.  By going to Appearance / Customize / Design Theme / Fonts, you will see that you can assign a Body font, a Menu font and a Heading font.  But the Heading Font is for all 6 of the H tags.  You can assign different sizes for each of the H tags, but only one color (Content Heading Color).  A page created on this website called Font Testing will help you to experiment with the different settings.

In Use Any Fonts, I have uploaded a font called Promesh and assigned it the H1 and H2 tags.  I also uploaded a script font called Amazone BT and assigned it to the H6 tag.   The H tag in the Vantage theme is Quicksand.  Therefore, the H3, H4, and H5 tags would use the Quicksand font.

Furthermore, I have assigned Additional CSS to the H1, H2 and H3 tags for color and size.  This overrides the Vantage theme settings.  Therefore, the H1 and H2 tags are not controlled by the Vantage theme at all.  However, the H3 tag, though scripted for color and size in Additional CSS, is not assigned to an H tag in Use Any Font.  Therefore, the Vantage theme picks it up with the Quicksand font.  The final configuration is H1 and H2 Promesh, H3, H4 and H5 Quicksand, H6 Amazone BT.

The Site Origin widget Editor can overwrite both the Vantage theme and the Additional CSS.  This is the most straightforward tool to use but it doesn't allow for the use of global styling.  For example, from the Site Origin Editor, I cannot assign a chosen size and color  (or other properties) to an H tag which would in turn propagate all text in the website that has been assigned an H1 tag.

In the Vantage theme make adjustments to the Content Color (which modifies the body or paragraph tag) and the Content Heading Color (which modifies the H tags).

Keep in mind that the settings for the Link Colors will override other settings.  Go to Appearance / Theme Design / General and set the Content Link Color and Content Link Hoover Color.  Now, any text that is linked will assume these properties.

The Content Size option modifies the body or paragraph tag and the H tags (provided the Content Heading Size has not already been set for the H tags.  If a Content Heading size has been set for an H tag, that tag will not be affected by the change to the Content Size.)  In this instance, because the H4, H5 and H6 tags already have sizes assigned, they are unaffected.

WEBSITE DESIGN
Development Process

• Interview customer and put any images logos and written content into a general folder.
• Purchase and/or Provide any images logo or content not provided and put into the general folder.
• Purchase domain name and clone a site to that name.
• Draw rough draft of sight. Determine what pages will be needed based on content and delete unneeded pages from both the website and the desktop folder.
• Install to the website the header and footer images, fonts, and font colors to establish general color scheme. (Document the hex values for the color scheme.  For example: green - very light, light, medium, dark, very dark.)
• Be selective in loading the best content from the general folder into the template folder on the desktop, giving consideration to the overall color scheme.
• Upload all images into the website folders.
• Manually install any images that need to be hand placed.
• Install all written content.

A FEW MISCELLANEOUS REMINDERS FOR THE BUILD.
Odd and ends to consider

The Site Origin Hero image on the home page does not accept the H tag formatting but has an internal styling. Not a good thing but one day maybe I'll figure out how to get text on an image without using this widget.

A similar issue exist with the Button widget. Colors are modified in the widget. The good news is that you can put text on a button without using an image. The Gallery and FAQ also have to be modified within the widget. Because most of the styles are neutral colors, 2 color changes should suffice for most designs. Remember to install the background2 image on the Pathway to Success page.