Font

The Font option adds a control that allows users to input or select a font family value for your custom widget. Unlike the more comprehensive Typography control, this appears to handle the core font-family CSS property.

Why would someone use it in a custom widget? #

Use this control when you need to give users the ability to change the primary font family for an element within your widget, but don’t require the full suite of typographic controls (size, weight, line-height, etc.) offered by the Typography option.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as an input field within your widget’s settings panel. Based on the screenshots, it may accept direct text input (like "Arial, sans-serif") or potentially integrate with a font selector. The exact front-end interface would need confirmation, as the screenshots focus on the builder’s back-end settings.

Available Settings #

Here are the configurable settings for the Font control based on the provided screenshots:

Basic Settings #

• Label: The name of the control (e.g., “Heading Font”, “Body Font”).
• Name: The unique machine-readable ID (like heading_font) for the dynamic shortcode.
• Description: Optional text to guide the user.
• Default Value: The pre-defined font-family value (e.g., "Roboto", sans-serif).

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard visibility and layout options.
• Dynamic Support: If enabled, the font value could potentially be pulled from a dynamic source.
• Frontend Available: If enabled, the font family string is passed to your widget’s JavaScript.
• Separator, Conditions, Control Classes, Selector: Standard advanced options.

Important Note: The provided screenshots show a simpler interface than the typical Elementor font selector. This suggests the Font control might be designed for direct CSS font-family string input or for a more basic selection, while the Typography control offers the full visual font picker with Google Fonts integration.

Generated Shortcode #

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

• What it represents: This shortcode outputs the font-family value string as defined by the user or the default (e.g., "Open Sans", sans-serif).
• Where to use it: Primarily in the CSS Panel to apply the font family.
  • CSS Panel: .widget-heading { font-family: {{main_font}}; }

How to Use It: A Practical Example #

Let’s create a “Quote Box” widget where the user can set a custom font for the quote text.

1. In Widget Builder’s Content tab, add a Font control.
2. Set the Label to Quote Font.
3. Set a Default Value like "Georgia", serif to provide a classic, readable default.
4. In your CSS panel, apply it to the quote element:css.quote-text { font-family: {{quote_font}}; font-size: 1.2em; line-height: 1.6; }
5. Users can then enter any valid CSS font-family stack into the control in the Elementor editor to change the font.

Common Use Cases #

• Primary Font Switching: Allow users to change the main font family of a key widget element, like a title or a block of text.
• Developer-Oriented Font Control: Provide a field for developers or advanced users to input custom font stack strings directly.
• Supplemental Styling: Use alongside other controls for specific font changes where the full Typography control would be overkill.

Helpful Tips #

• Provide Good Defaults: Always set a sensible, web-safe Default Value (like Arial, Helvetica, sans-serif) to ensure the widget looks correct immediately.
• Understand Its Scope: This control likely manages only the font-family. For full typographic control (size, weight, transformation, line-height), you should use the Typography control.
• Use in CSS: Remember, the output is designed to be placed directly into the CSS font-family property.
• Check Integration: Verify how this control appears in the live Elementor editor. If it’s a simple text input, instruct users to enter valid font family names or stacks (e.g., "Helvetica Neue", Helvetica, Arial, sans-serif).

The Font control provides a straightforward way to make a key stylistic property – the typeface – editable by the end-user, directly connecting their choice to your widget’s CSS.