EverWeb Logo


Setting Up Global Font Styles & Colors

Video Transcript:

► This Video's Contents...

0:00 - Introduction

0:50 - Accessing Global Styles

1:04 - Default Styles

1:25 - Preferred Fonts

2:13 - Paragraph Styles

4:26 - Document Colors

To use the features shown you will need to use EverWeb 4.0 or higher, for macOS or Microsoft Windows.

The new Global Styles feature makes setting up default font styles and color palettes for your site easy and flexible. Define all of the text styles and colors you want to use in one place!

Setting up Global Styles should be one of the first things you do when creating a new website project file. If you already have a project file you can still use Global Styles.

To access Global Styles, open your project file, then go to the Format, Default Styles menu option.

In the top left hand of the dialog box are the project''s Default Settings. These set default font family, font size and color for TextBoxes.

It's also where you set up defaults for Shape Objects and Hyperlinks. If you change the settings and save, they are applied only to new objects you create.

To the right of Default Settings, is Preferred Fonts, used by the Styled Text Editor found in widgets such as the Text Section and FlexBox widgets.

By default the column is filled with nine web safe fonts. Add fonts to the list by selecting the font and font style from the dropdown menus below the list of fonts then clicingk on the Add button.

Move fonts in the list by dragging the font from its current location and dropping it where you want it in the list.

To delete a font, select the font you want to delete then press Backspace. When finished click Save.

In the second row of settings are the defaults for Paragraph Styles. You can apply paragraph styling to any text within TextBoxes, the Styled Text Editor, or in the Blog Post Editor.

By default there are eight, predefined Paragraph Styles.

Double click on the Paragraph Style to change its name. Press Enter to finish.

Click once on the Paragraph Style to manage its properties e.g. click on 'Secondary Body' to select it. Next, use the Font Settings in the middle column to change the styling of the selected Paragraph Style.

EverWeb features scalable text for TextBoxes.

To implement this for your Paragraph Style, set the Font Size to the right of the Font Style dropdown. For example, 24 point.

Now set the minimum size in the Minimum Font Size field, e.g. 16 point. When you save these settings, then use the Paragraph Style, EverWeb will smoothly scale the text for you.

When setting up your Paragraph Style you can set up a Back Up Font if your main Paragraph Style font is not available. We recommend either a Web Safe or Google Font.

To add a new Paragraph Style click on the Plus button.

To delete a Paragraph Style, click on the Paragraph Style, then click on the Minus button. If the Paragraph Style being deleted is used in your site, select another Paragraph Style to replace the one you are deleting.

EverWeb lets you define default settings for the colors you use in your site's pages. Document Colors is where you define your site's color palette.

If, for example, you are setting the Page Background color, you can use a color swatch in the Page Background section of the Page Settings tab.

You will see a selection of color swatches to choose from. In this example, I am going to choose the blue color at the top of the column.

The color swatches you see are the ones defined in the Document Colors section of Global Styles.

In my example, I have a blue background for my page, but I can change the default color to something else in Document Colors. The blue color swatch is at the top of the list. Click on the color and adjust it using the Color Picker. When finished, click on Save. Wherever the blue swatch was used in your site will now change to the new color.