Typography

The Typography option adds Elementor’s full, native typography control to your custom widget. It provides a single interface to manage every aspect of text styling: font family, weight, size, line height, letter spacing, text transform, and decoration.

Why would someone use it in a custom widget? #

Use this control when you need to give users complete, professional-grade control over the typography of any text element within your widget. It’s the superior choice over the basic Font control for headings, paragraphs, or buttons where size, weight, and spacing are as important as the font itself.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as the exact same, powerful typography panel used by core Elementor widgets. Clicking it opens a detailed menu with tabs for all typographic properties, including integration with Google Fonts and Global Fonts.

Available Settings #

Here are the configurable settings for the Typography control:

Basic Settings #

• Label: The name of the control (e.g., “Heading Typography”, “Body Text”).
• Name: The unique machine-readable ID (like heading_typography) for the dynamic shortcode.
• Description: Optional guiding text.
• Default Value: This is a key feature. Instead of a fixed value, you can choose:
  • None: Starts with no preset.
  • Global Typography Preset: You can select a predefined typography style from the Elementor Theme Style global settings. This deeply integrates your widget with the site’s design system.

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard options. Responsive Control is essential here, as it allows setting different font sizes and line heights for desktop, tablet, and mobile.
• Dynamic Support, Frontend Available: These are less commonly used for a complex object like typography but are available.
• Separator, Conditions, Control Classes, Selector: Standard advanced options.

Generated Shortcode & Output #

When you add a Typography control with the Name title_typo, Widget Builder generates the shortcode: {{title_typo}}.

• What it represents: This shortcode does not output a simple value. Instead, it acts as a dynamic tag that, when placed in your CSS Panel, instructs the system to inject the full set of CSS rules for all the typography properties the user has configured.
• Where to use it:Exclusively in the CSS Panel. You apply it to a CSS selector.
  • CSS Panel: .widget-title { {{title_typo}} }
  • This one line will generate CSS like:

.widget-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    /* ... and other properties */
}

How to Use It: A Practical Example #

Let’s create a “Feature Card” widget with fully customizable title and description text.

1. In Widget Builder, add two Typography controls.
2. For the first, set Label to Title Typography. Name becomes title_typography.
3. In the Default Value dropdown, link it to the global Primary Headline preset for consistency.
4. For the second, set Label to Description Typography and link it to the Body Text global preset.
5. In your CSS panel, apply them:

.feature-card h3 {
    {{title_typography}}
}
.feature-card p {
    {{description_typography}}
}

Now, users get the full Elementor typography panel for both elements, can override global styles per-widget, and get perfect responsive control—all from a single, familiar interface.

Common Use Cases #

• Headings & Title Styling: The primary use case for complete control over headlines.
• Body Content: For widgets containing paragraphs of text (testimonials, blogs, descriptions).
• Button Text: To finely style button labels, including weight and letter spacing for emphasis.
• Creating Design-Consistent Widgets: Linking to Global Typography Presets ensures your widget automatically adheres to the site’s branding.

Helpful Tips #

• This is Not the Font Control: The Font control is for a simple font-family string. The Typography control is the complete, visual styling system. Choose this for almost all text elements.
• Leverage Global Styles: The most powerful feature is linking the Default Value to a Global Preset. This makes your widget instantly professional and consistent.
• It’s a CSS Generator: Remember, the shortcode is a generator. You place {{your_typography}} inside a CSS rule block, and it populates that block with all the necessary properties.
• Responsive is Built-in: Always consider enabling Responsive Control so users can adjust font sizes for different devices—a critical aspect of modern web design.

The Typography control is the definitive tool for integrating professional type styling into your custom widgets, leveraging the full power of Elementor’s design system.