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.
