Global Style Kit Fonts

Style Kits / Docs / Global design control / Global Style Kit Fonts

Similar to Elementor Global Fonts, Style Kit Fonts are Global typographic variables that can be used dynamically in any typographic element of the layout, across all pages. 

You can apply Style Kit Fonts via the “global” icon in the same way you apply Elementor Global Fonts. All of the available Style Kit Fonts will be included in the list.

The Style Kit Fonts panel

The Style Kit Fonts are located below Elementor Global Fonts, under Site-Settings \ Global Fonts.

Quick-access from the right-click menu

Right-click on any element in the editor to open the contextual menu. You can find a text link to teleport you to the Style Kit Fonts.

Panel Overview

The purpose of the Style Kit Fonts Panel is to have all the Typographic Styles of your design system in one central place, so you can manage and maintain them with efficiency. The Style Kit Typographic System that is used by the patterns makes use of the first panel that includes 16 color variables. 

There are up to 48 font styles available, split into three tabs. The free version allows for 16 font styles, which corresponds to the 16 slots of the first panel. Pro version allows for up to 48 styles, and facilitates wider design systems.

All the patterns in Style Kits are using a shared setup of this Typographic system

Titles

  • Display Title: The very big title usually in Hero sections
  • Title 1: Corresponds to H1
  • Title 2: Corresponds to H2
  • Title 3: Corresponds to H3
  • Title 4: Corresponds to H4
  • Title 5: Corresponds to H5
  • Title 6: Corresponds to H6
    Overline / Subheader: A small title style that is used over or under or above Titles

Text

  • Display Text: A big-size text used in parallel with Hero Title, or on it’s own.
  • Big Text: Bigger than body text, this style is used on quotes, testimonials, post intros etc.
  • Body Text: The main / body text style
  • Small Text: A smaller text style, for various use cases
  • Caption: Used for captions and fine print
  • Button text: This is the button text
  • Label: A style for the labels
  • Style 16: A blank slot for your own style

Customising the labels

You can rename any of the labels by clicking on it and typing your custom label. This will not affect the font variable slug. 

Last updated on January 16, 2023

Search docs

In this category

Join our mailing list

Stay in touch! Subscribe for occasional Style Kits updates.

We use cookies to optimise your experience. By continuing browsing our website, you agree to our Privacy Policy