Global Fonts - Creative Elements Documentation

Global Fonts lets you create reusable typography styles and apply them throughout your website. Instead of configuring the same font settings repeatedly, you can save a typography style once and select it wherever a typography control supports global values.

When a Global Font is updated, the new typography settings are automatically applied everywhere that Global Font is used. This makes it easier to keep headings, body text, buttons, labels, and other text elements consistent across the store.

Global Font

Create and configure a reusable typography style.

Name: Enter a descriptive name for the Global Font. Use a name that describes its purpose, such as Body, Heading, Navigation, Button, or Caption.
Family: Select the font family.
Size: Set the font size independently for responsive devices. Available units are px, em, rem, vw, and custom values.
Weight: Set the font weight. Available numeric weights range from 100 (Thin) to 900 (Black), together with Default, Normal, and Bold.
Transform: Control the capitalization of the text. Choose Default, Uppercase, Lowercase, Capitalize, or Normal.
Style: Choose Default, Normal, Italic, or Oblique.
Decoration: Choose Default, Underline, Overline, Line Through, or None.
Line-Height: Set the vertical space between lines of text. Available units are px, em, rem, and custom values.
Letter Spacing: Adjust the space between individual characters. Available units are px, em, rem, and custom values.
Word Spacing: Adjust the space between words. Available units are px, em, rem, and custom values.

Fallback Font Family

Enter the font or list of fonts that should be used if the selected font is not available. The default value is Sans-serif.

Tip: Create Global Fonts for typography styles you use repeatedly. A small set of clearly named styles is usually easier to maintain than configuring typography independently for every element.

Globals Preview

Use the Globals Preview switch to preview your Global Fonts while you are editing them. It lets you switch between the regular content area and a dedicated preview of your global styles, so you can immediately see how your typography settings work together.

As you edit a Global Font, the preview updates to reflect your changes, making it easier to compare font families, sizes, weights, line heights, and spacing across your typography system.

Tip: Switch to Globals Preview when adjusting your typography to see your changes in action without leaving the Global Fonts settings.

Creating Global Fonts

Global Fonts are fully customizable. You can create typography styles that match the structure and visual identity of your website.

Each Global Font has a name and its own typography settings. Once created, it becomes available from supported typography controls across Creative Elements.

Tip: Name Global Fonts by purpose rather than by their current font properties. For example, Body is more useful than Roboto 16px. If you change the font family or size later, the name can remain relevant.

Adding a Global Font

Open Theme Style > Global Fonts.
Add a new font style.
Enter a clear name.
Configure the typography settings you want the style to define.
Save or update Theme Style.

The new Global Font can then be selected from supported typography controls throughout Creative Elements.

Using a Global Font

When editing an element, open its Typography control and select the Global Font you want to use. The element then uses the typography values defined by that Global Font.

Good to know: When you update a Global Font, the new typography settings are automatically applied everywhere that Global Font is used. Typography configured individually is not affected.

Family

Family defines the typeface used by the Global Font. The configured Fallback Font Family is appended as a fallback in case the selected font cannot be loaded or is unavailable.

Size

Size defines the font size and is responsive, allowing different values for desktop, tablet, and mobile.

Available units include px, em, rem, vw, and custom values. Pixel values can be set from 1px to 200px.

Tip: Use the responsive controls when large desktop typography needs to scale down on smaller screens. This is especially useful for headings and display text.

Weight

Weight controls how light or bold the text appears. Creative Elements provides numeric values from 100 to 900, as well as Default, Normal, and Bold.

The available visual result depends on which font weights are provided by the selected font family. If a specific weight is not available, the browser may approximate it.

Transform

Transform controls capitalization without changing the original text content.

Default: Uses the inherited or browser default text transformation.
Uppercase: Displays all letters in uppercase.
Lowercase: Displays all letters in lowercase.
Capitalize: Displays the first letter of each word in uppercase.
Normal: Disables text transformation.

Style

Style controls the font style. Choose Default, Normal, Italic, or Oblique.

Decoration

Decoration adds or removes decorative lines from the text. Available options are Default, Underline, Overline, Line Through, and None.

Tip: Use text decoration intentionally. Underlining, for example, is commonly associated with links and may be confusing when used extensively on non-interactive text.

Line-Height

Line-Height controls the vertical spacing between lines of text. It is responsive and supports px, em, rem, and custom values.

Line-height has a strong effect on readability. Body text usually benefits from more breathing room than short headings or labels.

Letter Spacing

Letter Spacing adjusts the distance between characters. It is responsive and supports px, em, rem, and custom values.

Negative values move characters closer together, while positive values increase the spacing.

Tip: Small letter-spacing adjustments are usually enough. Larger positive spacing can work well for short uppercase labels, while excessive spacing can reduce readability in longer text.

Word Spacing

Word Spacing adjusts the distance between words. It is responsive and supports px, em, rem, and custom values.

This setting is normally left at its natural value unless the typography design requires a specific adjustment.

Fallback Font Family

Fallback Font Family defines the font or font list used when the chosen font is unavailable. The default value is Sans-serif.

The fallback is used together with the selected font family, helping text remain readable if the preferred font cannot be loaded.

Tip: Choose a fallback that is reasonably similar to your primary typeface. This can reduce noticeable layout changes if the preferred font fails to load.

Building a typography system

There is no required set of Global Fonts. Create styles based on the typography roles used by your website.

A typical store might create Global Fonts for:

Body text
Headings
Display or hero text
Buttons
Navigation
Labels
Captions or small text

These are only examples. The number and names of Global Fonts should match the actual design system of the store.

Using Global Fonts with Theme Style

Global Fonts define reusable typography values, while the other Theme Style sections determine where those styles are used. For example, the same Global Font can be assigned to body typography, headings, buttons, form labels, or other supported typography controls.

Example: Create a Global Font named Body and use it for body text, form fields, and other general content. If the site's base font family or spacing changes later, update Body once instead of editing each use separately.

Global Fonts and individual typography

Use a Global Font when typography has a reusable role in your design. Configure typography individually when a particular element intentionally needs a unique style.

Important: Only elements that use the Global Font are updated when it changes. Typography values configured independently remain unchanged.

Recommended workflow

Identify the recurring typography roles in the website.
Create a Global Font for each meaningful reusable role.
Name each style according to its purpose.
Configure Family, Size, Weight, and the spacing properties required by the style.
Use Global Fonts in Theme Style and widget controls instead of recreating the same typography manually.
Use individual typography settings only for genuine exceptions.
Configure the Fallback Font Family.
When the typography system changes, update the Global Fonts first.

Good to know: Current Creative Elements projects use the customizable Global Fonts list as the active typography palette. Legacy Default Fonts can still exist internally for backwards compatibility when legacy typography schemes are enabled, but they are not part of the current Global Fonts workflow.