How do I use global fonts and colors
Updated over a week ago

What are global settings?

Global settings enable you to change a property that is common across multiple pages and controls. Global fonts and global colors allow you to maintain a consistent look across the components of your application and quickly update a design. For example, if you decide to change your font color from blue to pink, you can simply change the global font instead of editing every page.


Using global fonts and colors

If you want to update items globally, you have to be tagged to add them to a group. Once tagged, you can modify the group using that global name.

You have four default groups of fonts and colors: Primary, Secondary, Text, and Accent. There are also two extra colors and fonts you can define and use if needed.

In the example below, we’ll modify all items labeled Primary on your site, including the title. First, let’s create a headline for the title.


Create the headline

To add a header, you need to select where you want the headline. To do so:

  1. Drag a section control to the top of the canvas, and change the background color to use the primary color from the global colors list.

  2. Drag a title control to add to the Section. Change the title text in the panel. Then go to the style tab, set the color as the Extra Color 1 from the global colors list, and the Typography as the Primary from the global fonts list.

  3. Save and publish your changes.


Change a global font

Go to the application settings page. Click "Appearance" from the tab navigation. Change the primary font settings by clicking the Pencil icon.

Change attributes in the Typography menu.

Click the Save Changes button at the bottom. Get back to the previous page and check the typography styles of the Title control.

To change a global color

From the application settings page, go to a font label called Primary. Click the color swatch to open the Color Picker. Select the color you want from the Color Picker, like change the color to #c7ddff for this sample. Then, change the Extra Color 1 to #12438d.

Click the Save Changes button at the bottom. Get back to the previous page and check the color styles of the heading section.

You’re now well on your way to creating a stunning application using global fonts and colors.

Did this answer your question?